javascript事件冒泡,事件捕获和事件委托详解

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› JavaScript›JavaScript编程经验

原作者: [db:作者] 来自: [db:来源] 收藏邀请

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>