事件冒泡，事件捕获，事件委托

最新推荐文章于 2023-03-28 20:28:11 发布

原创最新推荐文章于 2023-03-28 20:28:11 发布 · 699 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #css3

本文详细介绍了JavaScript中的事件冒泡机制，事件捕获以及如何阻止事件冒泡。事件冒泡是从子元素到父元素的事件传播，而事件委托利用这一特性，仅需在父级元素上绑定事件处理程序即可管理所有子元素的事件。此外，文中展示了如何使用addEventListener实现事件捕获，并通过示例代码解释了阻止事件冒泡的方法stopPropagation。最后，事件委托在减少DOM操作以提高性能方面的重要性也得到了强调。

1、事件冒泡：在javascript事件传播过程中，当事件在一个元素上出发之后，事件会逐级传播给先辈元素，直到document为止，有的浏览器可能到window为止。并不是所有的事件都有冒泡现象，比如如下几个：blur事件 focus事件 load事件

2、事件委托：事件捕获恰好与事件冒泡相反，它从顶层祖先元素开始，直到事件触发元素。

js事件捕获一般通过DOM2事件模型addEventListener来实现的：

target.addEventListener(type, listener, useCapture)

第三个参数默认设置为false，表示在冒泡阶段出发事件，设置为true时表示在捕获阶段触发，一般我们工作中似乎很少使用事件捕获。但还是要理解一下

<div id="box">
    <div id="middle">
        <div id="inner"></div>
    </div>
</div>

<script>

//事件捕获
window.onload=function(){
    let box=document.getElementById("box");
    let middle=document.getElementById("middle");
    let inner=document.getElementById("inner");
    box.addEventListener("click",function(){console.log("box")},true);
    middle.addEventListener("click",function(){console.log("middle")},true);
    inner.addEventListener("click",function(){console.log("inner")},true);
}
</script>

点击inner，控制台依次输出：box，middle，inner

阻止事件冒泡

平时会用到大量的事件冒泡事件，但是可能我们在某个子级标签不需要传递事件给父级，这时候就需要阻止它事件的冒泡。

一般，使用stopPropagation来阻止事件的冒泡，IE中使用cancleBuble=true，stopPropagation也是事件对象(Event)的一个方法，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为。

//阻止事件冒泡
let btna = document.getElementById('btn');
btna.onclick=function(e){
    window.event? window.event.cancelBubble = true : e.stopPropagation();
 };

3、事件委托：事件委托又可以叫事件代理，事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

益处：减少dom操作可以提高网页性能，当一个页面的父级元素和很多子级元素都需要操作同一件事件的时候，我们不可能每个元素都去给它绑定一个事件

<ul id="getNum">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
</ul>
<script>
let ptclick = document.getElementById('getNum');
let lilist = ptclick.querySelectorAll('li');
for(let i=0;i<lilist.length;i++){
    lilist[i].index = i;
};
ptclick.onclick = function(e){
    var e = e || window.event;
    var target = e.target || e.srcElement;
    console.log(e.target.index);
};

</script>