js事件冒泡
javascript的事件傳播過程中，當事件在一個元素上出發之后，事件會逐級傳播給先輩元素，直到document為止，有的瀏覽器可能到window為止，這就是事件冒泡現象。
並不是所有的事件都有冒泡現象，比如：blur、 focus、 load
js事件委托
事件委托又可以叫事件代理，事件委托就是利用事件冒泡，只指定一個事件處理程序，就可以管理某一類型的所有事件。
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)
$(document).ready(function(){ $("p").on("click",function(){ alert("段落被點擊了。"); }); });
js事件捕獲
事件捕獲恰好與事件冒泡相反，它從頂層祖先元素開始，直到事件觸發元素。
js事件捕獲一般通過DOM2事件模型addEventListener來實現的：
target.addEventListener(type, listener, useCapture)。第三個參數默認設置為false，表示在冒泡階段觸發事件，設置為true時表示在捕獲階段觸發。
js阻止事件冒泡
平時開發過程中，會用到大量的事件冒泡事件，但是可能我們在某個子級標簽不需要傳遞事件給父級，這時候就需要阻止它事件的冒泡。
一般，使用stopPropagation來阻止事件的冒泡，IE中使用cancleBuble=true，stopPropagation也是事件對象(Event)的一個方法，作用是阻止目標元素的冒泡事件，但是會不阻止默認行為。
接上面事件冒泡的例子：
//阻止事件冒泡 let btna = document.getElementById('btn'); btna.onclick=function(e){ window.event? window.event.cancelBubble = true : e.stopPropagation(); };