Dom基礎（三）:事件冒泡，事件委託（事件代理）和事件捕獲
阿新 • • 發佈：2022-04-12
javascript中的addEventListener(事件名，回撥，布林)
其中第三個引數預設為false-事件冒泡，true為事件捕獲
二者區別：
- 事件冒泡：目標元素事件先觸發，然後父元素事件觸發
- 事件捕獲：父元素事件先觸發，然後目標元素事件觸發
1 <body id="body"> 2 <div id="div1"> 3 <a href="#">a1</a> 4 <a href="#">a2</a> 5 <a href="#">a3</a> 6<a href="#">a4</a> 7 <button id="btn1">點選新增一個a標籤</button> 8 </div> 9 </body> 10 <script> 11 //通用繫結事件 12 function bindEvent(elem, type, fn) { 13 elem.addEventListener(type, fn) 14 } 15 16 //事件冒泡 17 const div1 = document.getElementById("div1")18 bindEvent(div1, 'click', event=>{ //事件冒泡，如果你點選是button或者a 則div1繫結的回撥也會觸發 19 console.log(event.target) 20 alert('這是冒泡') 21 }) 22 const body = document.getElementById("body") 23 bindEvent(body, 'click', event=>{ //事件冒泡，如果你點選是button或者a 則body繫結的回撥也會觸發 24 console.log(event.target)25 alert('這是body') 26 }) 27 </script>
事件委託是利用事件冒泡原理，把事件監聽繫結在元素的父級上。當元素被點選時，父級上繫結的點選事件就會被觸發，事件觸發函式裡通過判斷 e.target 上的 data-name 或 class 等標識來執行不同的邏輯。
優點：可以減少瀏覽器記憶體佔用，提高程式碼整潔度
<body id="body">
<div id="div1">
<a href="#">a1</a>
<a href="#">a2</a>
<a href="#">a3</a>
<a href="#">a4</a>
<button id="btn1">點選新增一個a標籤</button>
</div>
</body>
<script>
//通用繫結事件
function bindEvent(elem, type, fn) {
elem.addEventListener(type, fn)
}
//事件代理
const div1 = document.getElementById("div1")
bindEvent(div1, 'click', event=>{ //事件冒泡，可以指定父元素委託某個子元素觸發父元素繫結的回撥
event.preventDefault();
let target = event.target
if(target.nodeName=='A') {
console.log('這是div')
}
})
</script>
阻止事件冒泡和預設事件
event.preventDefault()可以阻止如a連結等預設行為
event.stopPropagation()可以阻止事件繼續冒泡