jquery事件之event.target用法详解

作者：袖梨 2022-11-14

显示哪个 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'))

相关文章

精彩推荐