JavaScript中冒泡與事件委托
阿新 • • 發佈：2019-01-05
目標 var color ace 函數 prevent 阻止默認行為 tor 事件委托
冒泡
事件觸發後事件流的三個階段按順序依次是：
1、捕獲階段
2、目標階段
3、冒泡階段
大盒子包裹小盒子，兩個盒子都分別添加點擊事件，當點擊小盒子，兩個盒子的事件都會觸發。
事件委托
下級元素委托上級元素，將子孫元素的事件註冊委托給父級元素來代理：
1、給父元素註冊點擊事件
2、在事件函數中通過（ 事件對象.target ）獲取最先觸發的元素（ 這就是需要被操作的子元素 ）
3、通過 nodeName 檢測是點擊了子元素還是點到了父元素上
事件對象的 公共屬性 和 方法
屬性：
事件對象.target → → 獲取最先觸發的元素
方法：
事件對象.preventDefault() ； 阻止默認行為（ 有兼容性 ）
事件對象.stopPropagation() ； 停止冒泡
重點
1、onmouseover支持冒泡
2、onmouseenter不支持冒泡
栗子
<!DOCTYPE html> <html lang="en"> <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> .box1 { width: 500px; height: 500px; background: pink; margin:0 auto; overflow: hidden; } .box2 { width: 400px; height: 350px; background:yellow; margin: 50px auto; overflow: hidden; } .box3 { width: 300px; height: 200px; background: deeppink; margin: 50px auto; } </style> </head> <body> <div class="box1">box1 <div class="box2">box2 <div class="box3">box3 點擊裏面的盒子會冒泡到外面的盒子</div> </div> </div> <script> // click事件栗子 var box1 = document.querySelector(‘.box1‘); box1.onclick = function(){ alert(‘添加在box1上的事件‘); } // onmouseover事件栗子 var box1 = document.querySelector(‘.box1‘); box1.onmouseover = function(){ console.log(‘添加在box1上的事件‘); } </script> </body> </html>
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; margin: 100px auto; padding: 30px; text-align: center; background-color: rgba(255, 192, 203, 0.466); } p { width: 200px; height: 40px; line-height: 40px; background-color: deeppink; } </style> </head> <body> <h5>將鼠標移動到上面兩個方塊上</h5> <h5>父元素添加了 onmouseover 事件，子元素未添加，但是當鼠標滑過子元素，也同樣會觸發事件</h5> <div onmouseover="myOverFunction()">父 <p id="demo">子</p> </div>
<i>此栗子參考鏈接：https://blog.csdn.net/u012309349/article/details/50885149</i>
<script> x = 0; function myOverFunction() { document.getElementById("demo").innerHTML = x += 1; } </script> </body> </html>
JavaScript中冒泡與事件委托