DOM事件流

yyyyyyoow

于 2024-06-28 16:45:00 发布

阅读量373

点赞数 6

文章标签： javascript 前端

本文链接：https://blog.csdn.net/mobolove/article/details/140047714

版权

DOM事件流
事件流描述的是从页面中接收事件的顺序
事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流
图
DOM事件流分为3个阶段：
1.捕获阶段
2.当前目标阶段
3.冒泡阶段
事件冒泡：IE最早提出，事件开始时由最具体的元素接收，然后逐级向上传播到DOM最顶层节点的过程
事件捕获：网景最早提出，由DOM最顶层节点开始，然后逐级向下播到最具体的元素接收的过程
我们向水里扔一块石头，首先它会有一个下降的过程，这个过程就可以理解为从最顶层向事件发生的最具体元素（目标点）的捕获过程；之后会产生泡泡，会在最低点（最具体元素）之后漂浮到水面上，这个过程相当于事件冒泡
注意：
1.JS代码中只能执行捕获或者冒泡其中的一个阶段
2.onclick和attachEvent只能得到冒泡阶段
3.addEventListener(type,listener[,useCapture])第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是flase（不写默认就是flase），表示在事件冒泡阶段调用事件处理程序。
<body>
<div class="father">
<div class="son">son盒子</div>
</div>
<script>
// 1. true捕获阶段document -> html -> body -> father -> son
// var son = document.querySelector('.son');
// son.addEventListener('click', function() {
// alert('son');
// }, true);
// var father = document.querySelector('.father');
// father.addEventListener('click', function() {
// alert('father');
// }, true);
// 2. false冒泡阶段 son -> father ->body -> html -> document
//为什么只点击son没有点击father和document也会弹窗？因为事件由一个冒泡过程，虽然只点了son也会按照一定的顺序往上传播，如果只点击father，son不会弹窗，因为往上传播
var son = document.querySelector('.son');
son.addEventListener('click', function() {
alert('son');
}, false);
var father = document.querySelector('.father');
father.addEventListener('click', function() {
alert('father');
}, false);
document.addEventListener('click', function() {
alert('document');
})
</script>
</body>