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