事件流
概念
首先,我们来了解一下什么是事件流。
事件流:当事件发生时,会在发生事件的元素节点与DOM树根节点之间按照特定的顺序进行传播, 这个过程称之为事件流。
(当页面触发一个事件时,会按照一定的顺序来响应事件,事件的响应过程称为事件流。)
分类
事件流可分为冒泡型事件流、捕获型事件流。
(1)事件冒泡:微软公司提出的,事件由子元素传递到父元素的过程叫做冒泡(false)。
查找事件(事件响应)的顺序:文本节点–>元素节点—>body—>html—>document(例如点击事件)<向上响应>
(2)捕获事件:网景公司提出的,事件由父元素传递到子元素的过程叫做事件捕获。(ture)
查找事件(事件响应)的顺序:document–>html–>body–>元素节点–>文本节点 <向下响应>
应用
在使用"事件监听"的方式绑定事件时,可以设置事件的响应方式。
DOM对象.addEventListener(事件,事件处理程序,事件冒泡方式)
事件冒泡方式:
(1)默认为false
,表示冒泡阶段完成事件处理
(2)true
为捕获阶段完成事件处理
例如:
<div class="father">father
<div class="son">son</div>
</div>
<script>
father=document.querySelector('.father')
son=document.querySelector('.son')
father.addEventListener('click',function(){
alert('father')
})
son.addEventListener('click',function(){
alert('son')
}) //事件冒泡
</script>
事件冒泡方式:son——>father——>body——>html——>document
son绑定的点击事件,没有设置事件流方式,默认的事件流类型为false(事件冒泡),当点击son盒子的时候,事件流向上冒泡,首先弹出son消息框,再弹出father消息框。
阻止事件冒泡的方式
常用方法:
(1)事件委托
:将元素的绑定事件写起其父元素上,防止事件冒泡
(2)event.stopPropagation()
:可以阻止事件冒泡,阻止父级元素的绑定事件
son.addEventListener('click',function(e){
alert('son')
e.stopPropagation(); //阻止事件冒泡
})
上面的例子中,加上e.stopPropagation()这句话,当点击son元素时,只会弹出son的弹窗,不加上这句话,点击son元素,会先弹出son,再弹出father。