jquery事件之event.target用法详解

时间：2022-11-14 22:03:29 编辑：袖梨来源：一聚教程网

YPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w***3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

显示哪个 DOM 元素触发了事件：

代码如下	复制代码
$("p, button, h1, h2").click(function(event){ $("div").html("Triggered by a " + event.target.nodeName + " element."); });

定义和用法

target 属性规定哪个 DOM 元素触发了该事件。

语法

event.target参数描述
event 必需。规定需要检查的事件。这个 event 参数来自事件绑定函数。

这使我想起了以前写的一个例子：

代码如下

复制代码

//del event
$(".del").bind("click",function(event){
var _tmpQuery=$(this);//为什么要加上这一句？
var id=$("input[name='id']",$(this).parents("form:first")).attr("value");
art.dialog.confirm('你确认删除该日志吗？',function(){
$.post("myRun/managerlog_del.php",{id:id},function(tips){
if(tips=='ok'){
art.dialog.tips('成功删除');
$(_tmpQuery.parents('tr:first')).hide();//如果不加第一句，这里用$($(this).parents('tr:first')).hide();则不会隐藏
//因为这里的this，并不是当前的class="del"这个DOM对象了。而是jQuery的AJAX配置对象ajaxSettings。测试：alert(this.url);
}else{
art.dialog.tips(tips,5);
}
});
return true;
});
});

那么现在我可以将上面代码通过$(event.target)这个方式来实现隐藏tr，而不用通过$(_tmpQuery.parents('tr:first')).hide();这样的方式，具体代码如下：

代码如下

复制代码

$(".del").bind("click",function(event){
//var _tmpQuery=$(this);这行代码可以删除
var id=$("input[name='id']",$(this).parents("form:first")).attr("value");
art.dialog.confirm('你确认删除该日志吗？',function(){
$.post("myRun/managerlog_del.php",{id:id},function(tips){
if(tips=='ok'){
art.dialog.tips('成功删除');
$(event.target).parents('tr:first').hide();
}else{
art.dialog.tips(tips,5);
}
});
return true;
});
});

event.target和$(event.target)的使用

代码如下

复制代码

无标题文档

第一行
- 这是公告标题1
- 这是公告标题2
- 这是公告标题3
- 这是公告标题4

上面的例子如果改成使用this

代码如下	复制代码

在看一个例子

代码如下

复制代码

item 1
- sub item 1-a
- sub item 1-b

item 2
- sub item 2-a
- sub item 2-b

例，点击搜索就自动隐藏

代码如下

复制代码

$(document).ready(function(){
$("*").click(function(event){
if(event.target.id!='_search_input'){
var newS=document.getElementById("remindWordTable");
newS.style.display="none";
}
});
});

event.target.id
event.target.nodeName

if($(event.target).hasClass('dd'))

推荐专题

最新下载

热门教程

jquery事件之event.target用法详解

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程