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>
相关文章
switch 这种表达式在很多语言中都有，比如java, C等待， 使用switch比使用if else 来得方便，来得清晰，下面为大家详细介绍下其具体的使用，感兴趣的朋友可以参考下2013-09-09
本文给大家简单介绍了在一个项目中涉及到的javascript使用闭包模拟对象的私有属性和方法，这里记录下来，分享给大家。2016-10-10
Add a Picture to a Microsoft Word Document
Add a Picture to a Microsoft Word Document...2007-06-06
本文通过实例代码给大家介绍了js异步上传图片文件的方法，包括html和jquery代码，需要的的朋友参考下吧2017-07-07
这篇文章主要为大家详细介绍了JS实现上传文件显示进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
由浅入深讲解Javascript继承机制与simple-inheritance源码分析
Javascript语言对继承实现的并不好，需要工程师自己去实现一套完整的继承机制。下面我们由浅入深的系统掌握使用javascript继承的技巧，对javascript继承相关知识感兴趣的朋友一起看看吧2015-12-12
动态设置鼠标事件的方法有很多，接下来为大家介绍下js中是如何做到的，感兴趣的朋友不要错过2013-10-10
这篇文章主要为大家详细介绍了js实现旋转木马轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
这篇文章主要介绍了基于JavaScript实现图片连播和联级菜单实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-07-07
javascript 延迟加载技术(lazyload)简单实现
延迟加载技术(简称lazyload)并不是新技术, 它是js程序员对网页性能优化的一种方案.2011-01-01
最新评论