event.currentTarget与event.target的区别介绍
更新时间:2012年12月31日 13:55:16 作者:
event.currentTarget与event.target的区别想大家在使用的时候不是很在意,本文以测试代码来讲解它门之间的不同
event.currentTarget identifies the current target for the event, as the event traverses the DOM. It always refers to the element the event handler has been attached to as opposed to event.target which identifies the element on which the event occurred.
即,event.currentTarget指向事件所绑定的元素,而event.target始终指向事件发生时的元素。翻译的不专业,好拗口啊,还是直接上测试代码吧:
<div id="wrapper">
<a href="#" id="inner">click here!</a>
</div>
<script type="text/javascript" src="source/jquery.js"></script>
<script>
$('#wrapper').click(function(e) {
console.log('#wrapper');
console.log(e.currentTarget);
console.log(e.target);
});
$('#inner').click(function(e) {
console.log('#inner');
console.log(e.currentTarget);
console.log(e.target);
});
/*
以上测试输出如下:
当点击click here!时click会向上冒泡,输出如下:
#inner
<a href="#" id="inner">click here!</a>
<a href="#" id="inner">click here!</a>
#wrapper
<div id="wrapper">…</div>
<a href="#" id="inner">click here!</a>
当点击click here!时click会向上冒泡,输出如下:
#wrapper
<div id="wrapper">…</div>
<div id="wrapper">…</div>
*/
</script>
即,event.currentTarget指向事件所绑定的元素,而event.target始终指向事件发生时的元素。翻译的不专业,好拗口啊,还是直接上测试代码吧:
复制代码 代码如下:
<div id="wrapper">
<a href="#" id="inner">click here!</a>
</div>
<script type="text/javascript" src="source/jquery.js"></script>
<script>
$('#wrapper').click(function(e) {
console.log('#wrapper');
console.log(e.currentTarget);
console.log(e.target);
});
$('#inner').click(function(e) {
console.log('#inner');
console.log(e.currentTarget);
console.log(e.target);
});
/*
以上测试输出如下:
当点击click here!时click会向上冒泡,输出如下:
#inner
<a href="#" id="inner">click here!</a>
<a href="#" id="inner">click here!</a>
#wrapper
<div id="wrapper">…</div>
<a href="#" id="inner">click here!</a>
当点击click here!时click会向上冒泡,输出如下:
#wrapper
<div id="wrapper">…</div>
<div id="wrapper">…</div>
*/
</script>
相关文章
javascript写的异步加载js文件函数(支持数组传参)
这篇文章主要介绍了javascript写的异步加载js文件函数,同时支持单个文件和多个文件(数组传参),但不兼容IE6,需要的朋友可以参考下2014-06-06Typescript tipe freshness 更严格对象字面量检查
这篇文章主要为大家介绍了Typescript tipe freshness 更严格对象字面量检查,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-10-10
最新评论