事件冒泡、捕获以及event.target与event.currentTarget的区别

最新推荐文章于 2024-12-09 15:01:55 发布

原创最新推荐文章于 2024-12-09 15:01:55 发布 · 765 阅读

2 ·

CC 4.0 BY-SA版权

前端学习专栏收录该内容

14 篇文章

订阅专栏

本文介绍了事件冒泡和事件捕获的概念，详细讲解了事件处理函数在冒泡和捕获阶段的执行，并探讨了如何阻止事件冒泡和默认行为。同时，解释了event.target和event.currentTarget的区别，通过示例展示了它们在不同事件阶段的行为。此外，还提到了event对象的常用属性和方法。

事件冒泡、事件捕获

冒泡捕获
如上图：

事件捕获：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)
事件冒泡：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

addEventListener的第三个参数决定事件处理函数在冒泡还是捕获阶段执行，设置为true就在捕获过程中执行，反之就在冒泡过程中执行处理函数。默认值是false

阻止事件冒泡：

DOM中提供stopPropagation()方法，但IE不支持，使用event对象在事件函数中调用就行.
IE中提供的是，cancelBubble属性，默认为false，当它设置为true时，就是阻止事件冒泡，也是用event对象在事件函数中调用.
jQuery中提供了stopPropagation()方法来停止事件冒泡，当需要时，只需用用event对象来调用就行，即event.stopPropagation();

阻止默认行为：

DOM中提供preventDefault()方法来取消事件默认行为，但是只有当cancelable属性设置为true的事件，才可以使用preventDefault()来取消事件默认行为，使用event对象在事件函数中调用就行。
IE中提供的是returnValue属性，默认为true，当它设置为false时，就是取消事件默认行为，也是用event对象在事件函数中调用。
jQuery中提供了preventDefault()方法来阻止元素的默认行为，只需要用event对象来调用就好，即event.preventDefault()

event.target与event.currentTarget

event.target:触发事件的元素（即被点击的元素）
event.currentTarget:绑定事件的元素（与this相等）
下面通过两个例子说明
示例一（每个元素都绑定事件）：

<div id="a">
    <div id="b">
      <div id="c">
        <div id="d"></div>
      </div>
    </div>
</div>

<script>
    document.getElementById('a').addEventListener('click', function(e) {
      console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);
    });    
    document.getElementById('b').addEventListener('click', function(e) {
      console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);
    });    
    document.getElementById('c').addEventListener('click', function(e) {
      console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);
    });    
    document.getElementById('d').addEventListener('click', function(e) {
      console.log('target:' + e.target.id + '&currentTarget:' + e.currentTarget.id);
    });
</script>

上面事件的绑定都是在冒泡阶段的，当我们点击最里层的元素d的时候，会依次输出:
target:d&currentTarget:d
target:d&currentTarget:c
target:d&currentTarget:b
target:d&currentTarget:a
从输出中我们可以看到，event.target指向引起触发事件的元素，而event.currentTarget则是事件绑定的元素，只有被点击的那个目标元素的event.target才会等于event.currentTarget。
如果我们把事件都绑定在捕获阶段，然后还是点击最里层的元素d，这时event.target还依旧会指向d，因为那是引起事件触发的元素，因为event.currentTaget指向事件绑定的元素，所以在捕获阶段，最先来到的元素是a,然后是b,接着是c,最后是d。所以输出的内容如下：
target:d&currentTarget:a
target:d&currentTarget:b
target:d&currentTarget:c
target:d&currentTarget:d

示例二（只给父元素绑定事件,利用事件委托）：

<ul id="ulT">
<li class="item1">fsda</li>
<li class="item2">ewre</li>
<li class="item3">qewe</li>
<li class="item4">xvc</li>
<li class="item5">134</li>
</ul>
<script type="text/javascript">
document.getElementById("ulT").onclick = function (event) {
console.log(event.target);
console.log(event.currentTarget);
}
</script>

此时无论点击哪个li,event.currentTarget都是ul，event.target是对应的被点击的li

event对象常用属性和方法：

event.preventDefault();//阻止默认事件
event.isDefaultPrevented();//检测 event.preventDefault() 是否被调用过
event.currentTarget;//发起事件的标签
event.target;//触发事件的标签
event.type//事件的类型
event.pageX;event.pageY //相对于文件的左侧和顶部边缘的位置
event.which;//针对键盘和鼠标事件，确定底按的是哪个键或按钮 常用在keydown事件中
event.timeStamp;//事件触发时与事件创建之间的时间间隔
event.stopPropagation(); //阻止事件的冒泡
摘自  爱jQuery：http://www.aijquery.cn/Html/jqueryrumen/25.html