怎么在JS html中實現事件冒泡和事件捕獲操作？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。
1.冒泡型事件：事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發。
我一般用法就是理解為觸發事件A, 會觸發A的父親，爺爺，爺爺的父親......
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>點擊事件捕獲冒泡實驗</title>
</head>
<body>
<div id="grandPa">
<div id="father">
<div id="son">
<input type="button" value="click"/>
</div>
</div>
</div>
<script type="text/javascript">
var father = document.getElementById('father');
father.addEventListener('click',function () {
alert('fattther');
})
var son = document.getElementById('son');
son.addEventListener('click',function () {
alert('son');
});
</script>
</body>
</html>點擊button，會以此彈出"son", "father"。
2.捕獲事件：使用事件捕獲時，父級元素先觸發，子級元素后觸發。
我們使用addEventListener添加監聽事件時，參數分別為(事件類型, function(){}, capture), 一般不寫第三個參數時默認為false，即事件冒泡。
所以1中的代碼會是事件冒泡順序。如果我們想改為事件捕獲，把參數設置為true即可，代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>點擊事件捕獲冒泡實驗</title>
</head>
<body>
<div id="container">
<div id="father">
<div id="son">
<input type="button" value="click"/>
</div>
</div>
</div>
<script type="text/javascript">
var father = document.getElementById('father');
father.addEventListener('click',function () {
alert('fattther');
},true)
var son = document.getElementById('son');
son.addEventListener('click',function () {
alert('son');
});
</script>
</body>
</html>看完上述內容，你們掌握怎么在JS html中實現事件冒泡和事件捕獲操作的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
