JavaScript中冒泡型事件和捕获型事件区别是什么?

事件是JavaScript最显著的特征,因为它提供了一个平台,让用户不仅可以浏览页面中的内容,而且能够跟页面进行交互,今天主要给大家讲解一下JavaScript中常见的事件流。

什么是事件流?

浏览器最初开始支持事件时,同一个事件仅仅只有一个元素相应。后来认为仅仅支持一个单一事件是不够的,而IE4之后提出了事件流的概念,一个元素可以支持多个事件。常见的事件流有冒泡型事件和捕捉型事件。

冒泡型事件

冒泡型事件指的是事件按照从最特定的事件目标到最不特定事件目标顺序逐一触发,代码如下:

JavaScript中冒泡型事件和捕获型事件区别是什么?

p标签、div标签、body标签都添加了onclick事件,触发了add()函数,单击鼠标时触发了事件,会发现3个onclick函数都触发了,触发的顺序是p标签、div标签、最后的body标签。冒泡型事件像冒泡一样从DOM层次结构的最低端往上一级级上升,p-div-body-document。给大家留个作业如果上面代码添加了,会出现什么样的结果。

JavaScript中冒泡型事件和捕获型事件区别是什么?

捕获型事件

捕获型事件和冒泡型事件是相反的,从不精确的对象到最精准的对象。这种事件也称作自顶向下事件模型,因为它是从DOM层次的顶端开始向下延伸的。需要注意的是IE浏览器不支持这种类型事件,我们只需要了解即可。如果设置了捕获型事件,前面的例子会反向进行。

关于“JavaScript事件流”先聊到这。每天学习一个知识点,每日寄语-“没有特别幸运,那么请先特别努力”如转载清标明出处。


分享到:


相關文章: