事件捕获指的是从document到触发事件的那个节点，即自上而下的去触发事件。相反的，事件冒泡是自下而上的去触发事件。绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获。true,事件捕获；false,事件冒泡。默认false,即事件冒泡。
<div id="parent" style="height: 100px;width: 100px;background-color: pink;"> <div id="child" style="width:100%; height:100%"> </div> </div> <script> document.getElementById('parent').addEventListener('click',(e) =>{ alert('parent'); }) document.getElementById('child').addEventListener('click',(e) =>{ alert('child'); }) </script>
结果先输出child，再输出parent，事件的触发顺序自内向外，这是事件冒泡。
<div id="parent" style="height: 100px;width: 100px;background-color: pink;"> <div id="child" style="width:100%; height:100%"></div></div>
<script> document.getElementById('parent').addEventListener('click',(e) =>{ alert('parent'); },true) document.getElementById('child').addEventListener('click',(e) =>{ alert('child'); },true)
</script>
结果先输出parent，再输出child，事件触发顺序变更为自外向内，这是事件捕获。
还有一种写法使用setTimeOut实现捕获
<div id="parent" style="height: 100px;width: 100px;background-color: pink;"> <div id="child" style="width:100%; height:100%"></div></div> <script> document.getElementById('parent').addEventListener('click',(e) =>{ alert('parent'); }) document.getElementById('child').addEventListener('click',(e) =>{ setTimeout(() => { alert('child'); }); }) </script>
关于setTimeout和setInterval的深入理解 https://www.cnblogs.com/xiaohuochai/p/5773183.html
内容来源于网络如有侵权请私信删除
- 还没有人评论，欢迎说说您的想法！
客服
