什麼是事件委托： 通俗的講，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是讓別人來做，這個事件本來是加在某些元素上的。 原理: 利用冒泡的原理，把事件加到父級上，觸發執行效果。 例如：要點擊刪除 ul 下的 li ,一般是都要給每個小li 綁定點擊事件 ...
什麼是事件委托：
通俗的講，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是讓別人來做，這個事件本來是加在某些元素上的。
原理: 利用冒泡的原理，把事件加到父級上，觸發執行效果。
例如：要點擊刪除 ul 下的 li ,一般是都要給每個小li 綁定點擊事件，然後再進行判斷是否刪除。代碼如下：
<body>
<input type="text" />
<ul>
<li>蘋果</li>
<li>香蕉</li>
<li>鴨梨</li>
</ul>
<script>
let ulList =document.querySelector("ul")
let liList=document.querySelectorAll("li")
for(let i=0;i<liList.length;i++){
liList[i].onclick=function(){
ulList.removeChild(this)
}
}
</script>
利用 事件委托刪除：（js部分）
let ul = document.querySelector('ul')
ul.addEventListener('click', function (e) {
ul.removeChild(e.target)
})
則只需 給小 li 的親父級綁定一個點擊事件，利用冒泡，來進行刪除。
DOM事件流（event flow ）存在三個階段：事件捕獲階段、處於目標階段、事件冒泡階段。
事件捕獲（event capturing）：通俗的理解就是，當滑鼠點擊或者觸發dom事件時，瀏覽器會從根節點開始由外到內進行事件傳播，即點擊了子元素，如果父元素通過事件捕獲方式註冊了對應的事件的話，會先觸發父元素綁定的事件。
事件冒泡（dubbed bubbling）：與事件捕獲恰恰相反，事件冒泡順序是由內到外進行事件傳播，直到根節點。就像水裡的泡泡一樣，從最裡面一直冒到最外面。
無論是事件捕獲還是事件冒泡，它們都有一個共同的行為，就是事件傳播，就很像多諾米骨牌一樣。只要就一個倒了，那麼後面就會產生連鎖反應。
阻止事件冒泡：
①e.stopPropagation()
在點擊事件中 添加 e.stopPropagation() 。 即可阻止冒泡
主要代碼如下：
<style> .big{ width: 500px; height: 500px; background-color: red; } .center{ width: 300px; height: 300px; background-color: green; } .small{ width: 150px; height: 150px; background-color: blueviolet; } </style> </head> <body> <div class="big"> <div class="center"> <div class="small"></div> </div> </div> <script> let big =document.querySelector('.big') let center =document.querySelector('.center') let small =document.querySelector('.small') big.addEventListener('click',function(e){ console.log(e.target); console.log(this); console.log("我是big"); }) center.addEventListener('click',function(e){ console.log("我是center"); e.stopPropagation() }) small.addEventListener('click',function(e){ console.log("我是small"); }) </script> </body>
②window.event.cancelBubble = true （谷歌，IE8相容，火狐不支持）
其它代碼與①一致，只展示修改部分：
center.addEventListener('click',function(e){
console.log("我是center");
window.event.cancelBubble = true //（谷歌，IE8相容，火狐不支持）
})
③合併取消：return false
在javascript的return false只會阻止預設行為，而是用jQuery的話則既阻止預設行為又防止對象冒泡。
如有錯誤，歡迎指正！！！
本文來自博客園，作者：一粒金燦米，轉載請註明原文鏈接：https://www.cnblogs.com/zy-feng/p/16818273.html
