大家在学习js的时候有没有困惑,为什么会出现冒泡,冒泡的机制是什么
接下来我向大家介绍一下DOM事件流,大家就清楚了
那么什么是DOM事件流
**
事件发生时会在元素节点之间按照特定的顺序传播,这个传播过程即 DOM 事件流。
**
事件流描述的是从页面中接收事件的顺序。
比如我们给一个div 注册了点击事件:
DOM 事件流分为3个阶段:
1. 捕获阶段
2. 当前目标阶段
3. 冒泡阶段 //主要阶段
注意
1.JS 代码中只能执行捕获或者冒泡其中的一个阶段。
2.onclick 和 attachEvent 只能得到冒泡阶段。
3.addEventListener(type, listener[, useCapture])第三个参数如果是 true,表示在事件捕获阶段调用事件处理程序;
如果是 false(不写默认就是false),表示在事件冒泡阶段调用事件处理程序。
4.实际开发中我们很少使用事件捕获,我们更关注事件冒泡。
5.有些事件是没有冒泡的,比如 onblur、onfocus、onmouseenter、onmouseleave
6.事件冒泡有时候会带来麻烦,有时候又会帮助很巧妙的做某些事件。
有时候在子元素与父元素同时注册了事件,但是让子元素响应,父元素也会跟着响应
<div class="father">
<div class="son"></div>
</div>
<style>
.father {
width: 400px;
height: 400px;
margin: 100px auto;
background-color: darkkhaki;
padding: 10px;
box-sizing: border-box;
}
.son {
width: 200px;
height: 200px;
margin: 100px auto;
background-color: darkmagenta;
}
</style>
<script>
var son = document.querySelector('.son');
son.addEventListener('click', function() {
alert('son');
})
var father = document.querySelector('.father');
father.addEventListener('click', function() {
alert('father');
})
son.addEventListener('click', function() {
alert('son');
})
father.addEventListener('click', function() {
alert('father');
})
</script>
大家可以实验一下
那么便利之处就在于可以实现事件委托
事件委托就是
不给每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点。
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<script>
var ul = document.querySelector('ul');
ul.onmousemove = function(e) {
e.target.style.backgroundColor = 'orange';
}
</script>