DOM事件流(event flow)存在三个阶段: 事件捕获阶段, 处于目标阶段,事件冒泡阶段.
事件捕获(event capturing) : 通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会从根节点开始由外到内进行事件传播,即点击了子元素,如果父元素通过事件捕获方式注册了对应的事件的话,那么会先触发父元素绑定的事件.
简单的说.触发dom事件时,事件捕获就像是石子扔水里一样,从上往下,从外到内,一级一级往下传播.
事件冒泡(dubbed bubbling) : 与事件捕获恰恰相反,事件冒泡顺序是由内到外进行事件传播,直到根节点。 无论是事件捕获还是事件冒泡,它们都有一个共同的行为,就是事件传播,它就像一跟引线,只有通过引线才能将绑在引线上的鞭炮(事件监听器)引爆,试想一下,如果引线不导火了,那鞭炮就只有一响了!!!
dom标准事件流的触发的先后顺序为:先捕获再冒泡,即当触发dom事件时,会先进行事件捕获,捕获到事件源之后通过事件传播进行事件冒泡。不同的浏览器对此有着不同的实现,IE10及以下不支持捕获型事件,所以就少了一个事件捕获阶段,IE11、Chrome 、Firefox、Safari等浏览器则同时存在。
说到事件冒泡与捕获就不得不提一下两个用于事件绑定的方法addEventListener、attachEvent。当然还有其它的事件绑定的方式这里不做介绍。
addEventListener在 IE11、Chrome 、Firefox、Safari等浏览器都得到支持。
attachEvent(event,listener)
·参数定义:event—(事件名称,如onclick,带on),listener—事件监听函数。
attachEvent主要用于IE浏览器,并且仅在IE10及以下才支持,IE11已经废了这个方法了(微软还是挺识趣的,慢慢向标准靠拢)。
说了一箩筐定义,下面就用上面这两个方法通过栗子来解释一下事件捕获与事件冒泡的具体表现行为差异。
事件冒泡
栗1:
<html lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>js事件机制</title> <style> #parent{ width: 200px; height:200px; text-align: center; line-height: 3; background: green; } #child{ width: 100px; height: 100px; margin: 0 auto; background: orange; } </style> </head> <body>
<div id="parent"> 父元素 <div id="child"> 子元素 </div> </div> <script type="text/javascript"> var parent = document.getElementById("parent"); var child = document.getElementById("child"); document.body.addEventListener("click",function(e){ console.log("click-body"); },false); parent.addEventListener("click",function(e){ console.log("click-parent"); },false); child.addEventListener("click",function(e){ console.log("click-child"); },false); </script> </body> </html>
通过”addEventListener”方法,采用事件冒泡方式给dom元素注册click事件,点击子元素会发生什么呢?如果你对事件冒泡有一定了解的话那你肯定知道上面的代码会输出的顺序,没错,如下图所示:
输出的顺序为:
1.click-child
2.click-parent
3.click-body
事件触发顺序是由内到外的,这就是事件冒泡,虽然只点击子元素,但是它的父元素也会触发相应的事件,其实这是合理的,因为子元素在父元素里面,点击了子元素也就相当于变相的点击了父元素.
如果想点击了子元素,不想触发父元素,这时候该怎么办呢.这时候可以停止事件传播.用:
event.stopPropagation(); 函数.
修改栗1的代码,在子元素的监听函数中加入停止事件传播的操作,如栗2:
child.addEventListener("click",function(e){ console.log("click-child"); e.stopPropagation(); },false); 在点击子元素的时候,就弹出了子元素的那条信息,父元素的事件没有传播,因为事件已经停止传播, 冒泡阶段也就停止了. 事件捕获
栗3,修改栗子1中的代码,给parent元素注册一个捕获事件,如下
var parent = document.getElementById("parent"); var child = document.getElementById("child"); document.body.addEventListener("click",function(e){ console.log("click-body"); },false); parent.addEventListener("click",function(e){ console.log("click-parent---事件传播"); },false); //新增事件捕获事件代码 parent.addEventListener("click",function(e){ console.log("click-parent--事件捕获"); },true); child.addEventListener("click",function(e){ console.log("click-child"); },false);
然后此栗子在控制台中输出的顺序为: 1.click-parent 事件捕获 2.click-child 3.click-parent 事件传播 4.click-body 父元素通过事件捕获的方式注册了click事件,所以在事件捕获阶段就会被触发,然后到了目标阶段, 即事件源,之后进行事件传播,parent同时也用冒泡方式注册了click事件,所以这里会触发冒泡事件, 最后到根节点,这就是整个事件流程. 最后,上面介绍了事件冒泡、事件捕获、事件传播,下面讲一下如果通过以上三个知识点进行事件委托. 委托在JQuery中已经得到了实现,即通过$(selector).on(event,childSelector,data,function,map)实现委托, 一般用于动态生成的元素,当然JQuery也是通过原生的js去实现的,下面举一个简单的栗子, 通过js实现通过parent元素给child元素注册click事件
var parent = document.getElementById("parent"); var child = document.getElementById("child"); parent.onclick = function(e){ if(e.target.id == "child"){ console.log("您点击了child元素") } } 虽然没有直接只child元素注册click事件,可是点击child元素时却弹出了提示信息。
No Comments