站長資訊網(wǎng)事件發(fā)生時(shí)會(huì)在元素節(jié)點(diǎn)之間按照特定的順序傳播，這個(gè)傳播過程即DOM事件流。
DOM事件流分為三個(gè)階段，分別為：
捕獲階段：事件從Document節(jié)點(diǎn)自上而下向目標(biāo)節(jié)點(diǎn)傳播的階段；
目標(biāo)階段：真正的目標(biāo)節(jié)點(diǎn)正在處理事件的階段；
冒泡階段：事件從目標(biāo)節(jié)點(diǎn)自上而下向Document節(jié)點(diǎn)傳播的階段。
捕獲階段：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .father { overflow: hidden; width: 300px; height: 300px; margin: 100px auto; background-color: pink; text-align: center; } .son { width: 200px; height: 200px; margin: 50px; background-color: purple; line-height: 200px; color: #fff; } </style> </head> <body> <div> <div>son盒子</div> </div> <script> var son = document.querySelector('.son'); son.addEventListener('click', function() { console.log('son'); }, true); var father = document.querySelector('.father'); father.addEventListener('click', function() { console.log('father'); }, true); document.addEventListener('click', function() { console.log('document'); }, true); </script> </body> </html>
控制臺(tái)輸出結(jié)果為：
可以看出捕獲階段 事件是從Document節(jié)點(diǎn)自上而下向目標(biāo)節(jié)點(diǎn)傳播的。
冒泡階段：
<script> var son = document.querySelector('.son'); son.addEventListener('click', function() { console.log('son'); }, false); var father = document.querySelector('.father'); father.addEventListener('click', function() { console.log('father'); }, false); document.addEventListener('click', function() { console.log('document'); }) </script>
控制臺(tái)輸出結(jié)果為：
可以看出冒泡階段 事件是從目標(biāo)節(jié)點(diǎn)自上而下向Document節(jié)點(diǎn)傳播的。
注意：
1、JS代碼只能執(zhí)行捕獲或者冒泡其中一個(gè)階段（要么是捕獲要么是冒泡）
2、onclick和attachEvent（ie）只能得到冒泡階段
3、addEventListener(type, listener[, useCapture]) 第三個(gè)參數(shù)如果是true，表示在事件捕獲階段調(diào)用事件處理程序；如果是false（不寫默認(rèn)是false），表示在事件冒泡階段調(diào)用事件處理程序
4、實(shí)際開發(fā)中，我們很少使用事件捕獲，我們更關(guān)注事件冒泡
5、有些事件是沒有冒泡的，比如onblur、onfocus、onmouseenter、onmouseleave
6、事件的冒泡有時(shí)會(huì)帶來麻煩，不過是可以被阻止的，方法是：stopPropagation()
stopPropagation() 方法：終止事件在傳播過程的捕獲、目標(biāo)處理或冒泡階段進(jìn)一步傳播。調(diào)用該方法后，該節(jié)點(diǎn)上處理該事件的處理程序?qū)⒈徽{(diào)用，事件不再被分派到其他節(jié)點(diǎn)。
本文來自 js教程 欄目，歡迎學(xué)習(xí)！
