JS事件冒泡、事件捕获及事件委托

时间 2020-05-22

原文原文链接

js事件冒泡javascript

javascript的事件传播过程当中，当事件在一个元素上出发以后，事件会逐级传播给先辈元素，直到document为止，有的浏览器可能到window为止，这就是事件冒泡现象。java

并非全部的事件都有冒泡现象，好比：blur、 focus、 loadjquery

js事件委托浏览器

事件委托又能够叫事件代理，事件委托就是利用事件冒泡，只指定一个事件处理程序，就能够管理某一类型的全部事件。 app

window.onload = function() { var div = document.getElementById('div'); div.addEventListener('click', function(e) { console.log(e.target.innerText)//点击哪一个div显示哪一个div。 }) var div3 = document.createElement('div');//建立div3 div3.setAttribute('class', 'div3') div3.innerHTML = 'div3'; div.appendChild(div3) }

<body>
    <div id="div">
        <div class="div1">div1</div>
        <div class="div2">div2</div>
    </div>
</body>

jquery中的on事件就是一个利用事件委托批量绑定事件。$(selector).on(event,childSelector,data,function)spa

$(document).ready(function(){ $("p").on("click",function(){ alert("段落被点击了。"); }); });

js事件捕获代理

事件捕获刚好与事件冒泡相反，它从顶层祖先元素开始，直到事件触发元素。code

js事件捕获通常经过DOM2事件模型addEventListener来实现的：对象

target.addEventListener(type, listener, useCapture)。第三个参数默认设置为false，表示在冒泡阶段触发事件，设置为true时表示在捕获阶段触发。blog

js阻止事件冒泡

平时开发过程当中，会用到大量的事件冒泡事件，可是可能咱们在某个子级标签不须要传递事件给父级，这时候就须要阻止它事件的冒泡。

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

接上面事件冒泡的例子：

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