JavaScript中冒泡与事件委托
Posted kiss雪夜
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript中冒泡与事件委托相关的知识，希望对你有一定的参考价值。
冒泡
事件触发后事件流的三个阶段按顺序依次是：
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中冒泡与事件委托的主要内容，如果未能解决你的问题，请参考以下文章