target、this、currentTarget的区别
2017-10-12 15:53
615 查看
原文详情链接
先诉重点理论:
1. target:触发事件的某个具体对象,只会出现在事件流的目标阶段(谁触发谁命中,所以肯定是目标阶段)
2. currentTarget:绑定事件的对象,恒等于this,可能出现在事件流的任意一个阶段中
3. 通常情况下terget和currentTarget是一致的,我们只要使用terget即可,但有一种情况必须区分这三者的关系,那就是在父子嵌套的关系中,父元素绑定了事件,单击了子元素(根据事件流,在不阻止事件流的前提下他会传递至父元素,导致父元素的事件处理函数执行),这时候currentTarget指向的是父元素,因为他是绑定事件的对象,而target指向了子元素,因为他是触发事件的那个具体对象,如下代码和截图所示:
<div id="one">
<div id="three"></div>
</div>
one.addEventListener('click',function(e){
console.log(e.target); //three
console.log(e.currentTarget); //one
},false);
先诉重点理论:
1. target:触发事件的某个具体对象,只会出现在事件流的目标阶段(谁触发谁命中,所以肯定是目标阶段)
2. currentTarget:绑定事件的对象,恒等于this,可能出现在事件流的任意一个阶段中
3. 通常情况下terget和currentTarget是一致的,我们只要使用terget即可,但有一种情况必须区分这三者的关系,那就是在父子嵌套的关系中,父元素绑定了事件,单击了子元素(根据事件流,在不阻止事件流的前提下他会传递至父元素,导致父元素的事件处理函数执行),这时候currentTarget指向的是父元素,因为他是绑定事件的对象,而target指向了子元素,因为他是触发事件的那个具体对象,如下代码和截图所示:
<div id="one">
<div id="three"></div>
</div>
one.addEventListener('click',function(e){
console.log(e.target); //three
console.log(e.currentTarget); //one
},false);
相关文章推荐
- target,currentTarget和this三者的区别
- target currentTarget 的区别
- JS事件:target与currentTarget区别
- jQuery中event.target和this的区别——冒泡
- 三言两语之js事件、事件流以及target、currentTarget、this那些事
- 事件对象中target对象和currentTarget对象的区别
- js中event的target和currentTarget的区别
- js中event的target和currentTarget的区别
- target与currentTarget的区别?
- target与currentTarget的区别?
- this与e.target的区别
- Event的target和currentTarget的区别
- Flex event.target; event.currentTarget; 这两个有什么区别
- 多线程里面this.getName()和currentThread.getName()有什么区别
- js中event的target和currentTarget的区别
- Android error:This template requires a build target API version of at least 14, and the current vers
- jS事件:target与currentTarget区别
- target和currentTarget的区别
- javascript addEventListener中的e.target和this的区别
- [置顶] Java多线程--详解this与Thread.currentThread()的区别