您的位置:时时app平台注册网站 > web前端 > 事件冒泡和事件捕获

事件冒泡和事件捕获

2019-10-18 23:56

        先进行捕获后进行冒泡

此模型是W3C制订的正儿八经模型,既然是正式,那大家都得按这些来,大家以后利用的现世浏览器(指IE6~8除此之外的浏览器)都早就依据那些正式。W3C制订的风浪模型中,“DOM2级事件”中鲜明的轩然大波流同期扶植了平地风波捕获阶段和事件冒泡阶段,而作为开荒者,大家得以选取事件管理函数在哪二个等第被调用。
贰回事件的发生包罗四个经过:

DOM事件模型最优异的个性是,文本节点也触发事件(在IE中不会)。
  • 支撑W3C规范的浏览器在抬高事变时用addEventListener(event,fn,useCapture)方法,基中第三个参数useCapture是八个Boolean值,用来安装事件是在事件捕获时执行,依然事件冒泡时试行。
  • 不相称W3C的浏览器(IE)用attach伊芙nt()方法,此办法未有相关安装,不过IE的平地风波模型暗许是在事变冒泡时推行的,也便是在useCapture等于false的时候履行,所以把在处管事人件时把useCapture设置为false是比较安全,也落到实处包容浏览器的功能。

图片 1

示意图

 

怎么是事件?
直观的说正是网页上发出的专业,超过八分之四是指顾客的鼠标动作和键盘动作,如点击、移动鼠标、按下有些键。为何说大多数呢,因为事件不单单唯有这两片段,还会有其他的诸如document的load和unloaded。只然则大家尤其关怀的是客户的操作。

事件模型:典型事件的定义的一种标准

事件的三种模型:

W3C模型

W3C模型是将二者进行和平,在W3C模型中,任何事件发生时,先从顶层早先开展事件捕获,直到事件触发达到了平地风波源成分。然后,再从事件源往上开展事件冒泡,直到达到document。程序猿能够友善选拔绑定事件时接纳事件捕获依有趣的事件冒泡,方法就是绑定事件时经过addEventListener函数,它有多个参数,第八个参数要是true,则象征选用事件捕获,尽管false,则象征选拔事件冒泡。

IE浏览器如上面所说,IE只扶持事件冒泡,不扶助事件捕获,它也不帮忙add伊夫ntListener函数,不会用第五个参数来代表是冒泡照旧捕获,它提供了另三个函数attach伊芙nt。

ele.attachEvent("onclick", doSomething2);

   事件捕获:父级查找子级的进程叫事件捕获

背景知识

假定一个要素div,在那之中蕴藏叁个成分p。

<div>
  <p>元素</p>
</div>

那三个成分都绑定了click事件,假设顾客点击了p,它在div和p上都接触了click事件,那那三个事件管理程序哪个先推行呢?事件顺序是何等?

                      所通过的父级的和子级相同的风云会被施行

阻止事件冒泡和破获

小编们得以选取时间对象event的stopPropagation()形式阻碍事件的越来越扩散。
咱俩修改一下doingHomework函数:

图片 2

为grandson的风浪设置阻碍事件指标

图片 3

安装阻碍事件后,点击grandson的结果

意识事件推行到doingHomework就被堵嘴了,其后不会在事变传播到父元素。
值得注意的是,event.stopPropagation()函数并不会阻拦其下函数内容的奉行。

*例如你利用的是jquery的风云绑定,也得以直接在函数中利用return false来阻止事件的传布(当然event.stopPropagation一样有效),与event.stopPropagation不一样的是,return false会阻止同函数上面包车型地铁代码试行 *

历史观绑定事件措施在贰个援救W3C DOM的浏览器中,像那样日常的绑定事件措施,是利用的平地风波冒泡格局。
ele.onclick = doSomething2

IE浏览器
如上边所说,IE只协助事件冒泡,不援救事件捕获,它也不支持add伊芙ntListener函数,不会用第多少个参数来表示是冒泡如故捕获,它提供了另三个函数attach伊夫nt。
ele.attachEvent("onclick", doSomething2);

不是具有的风浪都能冒泡,举例:blur、focus、load、unload。

事件冒泡的受益

  • 我在github上的demo

一、冒泡型事件

事件依据从最准确的对象到最不准确的目的的逐个触发。差别浏览器的依次有所不一致。
IE 5.5: div -> body -> document
IE 6.0: div -> body -> html -> document
Mozilla 1.0: div -> body -> html -> document -> window

第一大家来讲说什么样是事件冒泡

  • 本来事件模型(DOM 0级事件模型)
  • IE事件模型
  • DOM2事件模型

截留事件的暗许行为,比方a标签点击后的跳转

• 在W3c中,使用preventDefault()方法;
• 在IE下设置window.event.returnValue = false;;
不是颇负的平地风波都能冒泡,举个例子:blur、focus、load、unload.

 

1. 是什么?

<div id="outer">
    <p id="inner">Click me!</p>
</div>

地点的代码个中一个div成分在那之中有二个p子成分,要是八个要素都有几个click的管理函数,那么大家怎么才具领略哪叁个函数会首先被触发呢?

为了消除那个题目微软乎乎网景提议了二种差不离统统相反的概念。

**事件流 : ** 指的是页面中收到事件的顺序.

事件的传遍是能够阻碍的:

• 在W3c中,使用stopPropagation()方法;
• 在IE下设置cancelBubble = true;;
在捕获的长河中stopPropagation();背后的冒泡进程也不会发生了。

                      当子级触发事件时,这些事件会产生叁个时辰流,那一个事件流会稳步的升高传播,

3. 实行原理

<ul>
   <li>
       <p>
          <a>  </div>
      </p>
   </li>
</ul>

图片 4

事件冒泡和事件捕获原型图

事件捕获阶段:事件从最上一流标签开端往下搜寻,直到捕获到事件目的(target)。
事件冒泡阶段:事件从事件指标(target)早先,往上冒泡直到页面的最上超级标签。

事件捕获当你利用事件捕获时,父级成分先触发,子级成分后触发,即div先触发,p后接触。
事件冒泡当你利用事件冒泡时,子级成分先触发,父级成分后触发,即p先触发,div后触发。

>从前Netscape和Microsoft是例外的兑现格局

  • Netscape中,div先触发,那就称为事件捕获。事件捕获当您利用事件捕获时,父级成分先触发,子级成分后触发,即div先触发,p后触及。
  • Microsoft中,p先触发,那就称为事件冒泡。事件冒泡当你接纳事件冒泡时,子级成分先触发,父级成分后触发,即p先触发,div后触发。
  • 两种事件管理顺序刚好相反。IE只帮助事件冒泡,Mozilla, Opera 7 和 Konqueror三种都支持,旧版本的Opera's 和 iCab三种都不扶植 。

IE的破获机制和任何的浏览器捕获有如何分化:  IE唯有事件冒泡,而标准浏览器既有事件捕获和事件冒泡

2. 化解了如何难题?

那四个概念都感觉了化解页面中事件流(事件发生顺序)的主题素材。

http://www.imooc.com/article/9833

事件冒泡(的经过)

事件从发生的靶子(event.srcElement||event.target)领头,沿着文书档案逐层向上冒泡,到document结束。

 

4. 怎么着行使?

聊起事件的举办各种,那么大家须求掌握三个给成分加多事件的秘籍, 即给某成分动态绑定事件
W3C为大家提供了addEventListener()函数用来为内定的dom成分动态绑定事件。

语法:
element.addEventListener( event ,  function ,  useCapture )

图片 5

参数解析

提示: 使用 remove伊芙ntListener()方法来移除 add伊芙ntListener() 方法加多的事件句柄。

function sayHello() { 
console.log("hello");
}
var myDiv = document.getElementById("myDiv");
myDiv.addEventListener("click", sayHello);

这样我们点击id为myDiv的元素时,控制台就会输出"Hello"。

注意:

    事件冒泡:子级找寻父级的经过

事件冒泡与事件捕获就算同期进行如何做

有考虑的同班肯定会思忖这样七个难点,在上述绑定事件的代码中,第七个参数不是整整装置的true,便是整整设置成false,这要是既有true,又有false,有的成分设置成按事件冒泡管理,有的成分设置成按事件捕获管理,这怎么办吧?
直白报告大家答案,我们的浏览器更“垂怜”事件捕获:

它会先把useCapture为false的要素绑定事件放到一边,根据事件捕获平常的逐条实施useCapture为true的因素绑定事件,最终在根据事件冒泡顺序实施useCapture为false。
今后大家作如下改动

图片 6

既有事件冒泡又有事件捕获

依照上述条件,当点击grandson时,先进行useCapture为true的元素的绑定事件,又依照事件捕获原则,先执行grandpa的风浪,再施行child的风浪。之后,再依照事件捕获顺序施行useCapture为false的轩然大波,输出结果如下:

图片 7

细说addEventListener与事件捕获、事件冒泡_

三、DOM事件流

同一时间帮忙二种事件模型:捕获型事件和冒泡型事件,可是,捕获型事件先产生。两种事件流会触及DOM中的全数目的,从document对象早先,也在document对象截止。

 

DOM2事件模型:

二、捕获型事件

事件从最不确切的靶子先导接触,然后到最规范对象。

 

(1)capturing phase:事件捕获阶段。
事件被从document平昔向下传播到对象成分,在这里进程中逐个检查通过的节点是或不是注册了该事件的监听函数,若有则实践。

(2)target phase:事件管理阶段。
事件到达目的成分,实行对象成分的事件管理函数.

(3)bubbling phase:事件冒泡阶段。
事件从指标元素回涨平昔到达document,一样依次检查通过的节点是还是不是注册了该事件的监听函数,有则奉行。

由地点那句话能够看出来二个问题

装有的事件类型都会经历captruing phase(事件捕获),不过唯有部分事件会经历bubbling phase(事件冒泡)阶段,比如submit事件就不会被冒泡。

                     全部子级的等同事件会被触发

事件捕获

网景提议另一种事件流名字为事件捕获(event capturing)。
当多少个DOM成分上的平地风波被触发的时候(如:开关点击事件),这几个因素的具有父元素中,借使也绑定有该一样事件,则也会被触发, 触发的依次就是先从 : ....... 父成分 ==> 邻近父元素 ==> 当前因素的风云,这一经过被称为事件捕获
与事件冒泡相反,事件会从最外层起初发生,直到最实际的要素。
上面的例子在事变捕获的概念下发生click事件的逐条应该是:
document -> html -> body -> div -> p

图解:

图片 8

事件冒泡和破获具体如图

现行反革命又有八个标题,当事件冒泡和事件捕获同期发出时会产生什么样状态吗

事件冒泡

有如下html代码:

图片 9

html代码

图片 10

运作结果

上面安装了七个函数用来进展事件绑定:

图片 11

要绑定的函数

选用下边的代码,大家能够获得八个要素对应DOM

图片 12

四个DOM元素

现行,小编试着还要分别为grandpa和grandson绑定sleep和doingHomework事件:

图片 13

绑定事件

那时大家点击最外层的grandpa时,当然会触发sleep函数,然则当大家点击grandson时,调控台的输出如下:

图片 14

调控台查看结果

原因:那是因为grandson在grandpa之上,当点击grandson时,同期也在grandpa上拓宽了点击操作,所以在推行了doingHomework后,还只怕会触发grandpa的sleep函数。
这种当满意条件后从子成分到父成分依次触发其上事件的管理方式叫做事件冒泡

大家也为father和child分别绑定watchTV和playingCard函数

图片 15

绑定事件

图片 16

调整台查看结果

事件冒泡()
grandpa.addEventListener("click", sleep);            
grandson.addEventListener("click", doingHomework);            
father.addEventListener("click", watchTV);            
child.addEventListener("click", playingCard);

图片 17

八个因素都绑定一样事件,点击grandson时的结果

图片 18

点击child元素的 结果

                     当子级触发一个事件时会触发事件流,那一个事件流会从父级传递到子级,所通过的

事件捕获

事件捕获与事件冒泡完全相反,先触发祖先元素的事件,然后再逐级触发子成分的风浪。暗许情状下,绑定事件时,采纳事件冒泡原则,假诺想要进行事件捕获的话,供给设置二个参数 。

可以为addEventListener函数增添第多个参数useCapture,参数值是布尔值,私下认可是false。当useCapture为false时,事件管理采纳事件冒泡的标准,当userCapture为true时,则选用事件捕获的基准

图片 19

绑定捕获事件

那儿,当点击grandson时,就能够先进行祖先成分的平地风波,再推行后代成分的事件了,调节台的输出如下图所示:

图片 20

抓获事件的奉行结果

即使私下认可景况下,useCapture的值是false,但本身引入大家在绑定函数时把它显著的写出来防止止浏览器宽容性的主题素材。

事件冒泡是由IE提议,而事件捕获是由网景建议

事件冒泡

微软建议了名称叫事件冒泡(event bubbling)的平地风波流。
事件冒泡能够形象地比喻为把一颗石头投入水中,泡泡会一向从水底冒出水面。

当二个DOM成分上的事件被触发的时候(如:按键点击事件),那个成分的保有父成分中,借使也绑定有该同样事件,则也会被触发, 触发的逐一便是先从 : 当前成分的风云 ==> 临近父成分 ==> 父成分......,这一进程被称作事件冒泡

据此地方的事例在事件冒泡的定义下产生click事件的逐一应该是:
p -> div -> body -> html -> document
IE,火狐和chrome浏览器都以事件冒泡.

本文由时时app平台注册网站发布于web前端,转载请注明出处:事件冒泡和事件捕获

关键词: