美文网首页
js 事件冒泡和事件捕获

js 事件冒泡和事件捕获

作者: 月半女那 | 来源:发表于2019-01-09 11:47 被阅读0次

1. 事件冒泡

事件开始时由最具体的元素(文档嵌套层次最深的那个节点)接受,然后逐级向上传播


事件冒泡.png

当点击div时事件传递由div → body → html 的顺序传播
IE9,chrome,Firefox,Opera,Safari都支持事件冒泡,并将事件冒泡到window对象。

2. 事件捕获

事件由最上级的节点接受事件,逐级向下传播直到目标元素


事件捕获.png

当点击div时 由 body → id='button'的div → id='haha' 的div
IE9,chrome,Firefox,Opera,Safari都支持事件捕获,但是IE8和IE8以下的版本只支持事件冒泡。尽管DOM2规范要求事件应该从document对象开始传播,但是现在的浏览器实现都是从window对象开始捕获事件。

3. DOM时间流

DOM事件流.jpg

"DOM2级事件”规定的事件流包含三个阶段:事件捕获阶段,处于目标阶段和事件冒泡阶段。首先发生的是事件捕获,然后是实际的目标接收到事件,最后阶段是冒泡阶段。

4. 事件的传播是可以阻止的

在w3c中使用stopPropagation()
ie下设置cancelBubble = true
在捕获过程中stopPropagation()之后,后面的冒泡过程也不会发生
阻止事件的默认行为,在w3c中可以使用preventDefault()在IE下 window.returnValue = false

相关文章

  • vue 阻止事件冒泡,捕获方法

    要想了解 VUE 阻止事件冒泡和捕获方法,首先要了解一下 JS 事件和 JS 阻止事件冒泡,捕获方法 1. js ...

  • JS事件相关基础

    js事件: 键盘事件: JS中的事件冒泡和事件捕获: 1、事件冒泡。如下代码: 点击button事件,连同父元素绑...

  • 图解事件委托

    事件捕获和事件冒泡 说到事件委托我们就不得不提JS中事件的整个历程中的两个机制:事件捕获和事件冒泡。 然而要说这事...

  • 事件基础(2)

    js事件的三个阶段:捕获,目标,冒泡 IE:IE事件流是事件冒泡流 Netscape事件流是事件捕获流 IE事件...

  • js 阻止冒泡 阻止默认事件

    js冒泡和捕获是事件的两种行为,使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件...

  • 默认事件

    js冒泡和捕获是事件的两种行为,使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件...

  • Javascript 事件代理、冒泡和捕获

    2019开工荒了两天,赶紧开始! 为什么写事件代理、冒泡、捕获,首先冒泡和捕获是js事件的核心基础,事件代理原理来...

  • 事件冒泡和事件捕获

    事件冒泡和事件捕获

  • JS事件冒泡和事件捕获

    谈起JavaScript的 事件,事件冒泡、事件捕获、阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难...

  • JS事件冒泡和事件捕获

    css部分 JS部分 默认 false , false 是冒泡, true 是事件捕获 事件捕获 假设在box3...

网友评论

      本文标题:js 事件冒泡和事件捕获

      本文链接:https://www.haomeiwen.com/subject/jashrqtx.html