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(); };

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。