`
marb
  • 浏览: 418825 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript事件冒泡与事件捕获

 
阅读更多

javascript的核心就在于事件处理。我们经常会对一个对象进行事件绑定,加上事件处理函数。如果一个元素和它的一个上级节点对于同一个事件都有进行事件处理,哪一个先触发呢?毫无疑问,这决定于浏览器。

假设一个元素element1,它有一个下级元素element2。

如图:

-----------------------------------
| element1                        |
|   -------------------------     |
|   |element2               |     |
|   -------------------------     |
|                                 |
-----------------------------------

这两个元素都绑定了click事件,如果用户点击了element2,它在element1和element2上都触发了click事件,那这两个事件处理程序哪个先执行呢?事件顺序是什么?

 

两种模型


以前,Netscape和Microsoft是不同的实现方式。

Netscape中,element1先触发,这就叫做事件捕获。

Microsoft中,element2先触发,这就叫做事件冒泡。

两种事件处理顺序刚好相反。Explorer只支持事件冒泡,Mozilla, Opera 7 和 Konqueror两种都支持,旧版本的Opera’s 和 iCab两种都不支持 。

事件捕获


当你使用事件捕获时,父级元素先触发,子级元素后触发,即element1先触发,element2后触发。如图:

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2   /          |     |
|   -------------------------     |
|        事件捕获                 |
-----------------------------------

事件冒泡


当你使用事件冒泡时,子级元素先触发,父级元素后触发,即element2先触发,element1后触发。如图:

               /
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        事件冒泡                 |
-----------------------------------

W3C模型


W3C模型是将两者进行中和,在W3C模型中,任何事件发生时,先从顶层开始进行事件捕获,直到事件触发到达了事件源元素。然后,再从事件源往上进行事件冒泡,直到到达document。

                 | |  /
-----------------| |--| |-----------------
| element1       | |  | |                |
|   -------------| |--| |-----------     |
|   |element2     /  | |          |     |
|   --------------------------------     |
|        W3C 模型                        |
------------------------------------------

程序员可以自己选择绑定事件时采用事件捕获还是事件冒泡,方法就是绑定事件时通过addEventListener函数,它有三个参数,第三个参数若是true,则表示采用事件捕获,若是false,则表示采用事件冒泡。

比如:

 element1.addEventListener('click',doSomething2,true)

element2.addEventListener('click',doSomething,false)

这样绑定,点击element2后

  1. 从顶到底进行事件捕获,碰到了element1这个采用了事件捕获的元素,则doSomething2函数执行。
  2. 到达事件源元素element2后,从底到顶进行事件冒泡,碰到了element2这个采用了事件冒泡的元素,则doSomething函数执行。

比如:

 element1.addEventListener('click',doSomething2,false)

element2.addEventListener('click',doSomething,false)

这样绑定,点击element2后

  1. 从顶到底进行事件捕获,没有碰到任何采用事件捕获的元素。
  2. 到达事件源元素element2后,从底到顶进行事件冒泡,先碰到了element2这个采用了事件冒泡的元素,则doSomething函数执行,再碰到了element1这个采用了事件冒泡的元素,则doSomething2函数执行

与传统绑定事件方式的兼容


在一个支持W3C DOM的浏览器中,像这样一般的绑定事件方式,是采用的事件冒泡方式。

 element1.onclick  = doSomething2

IE浏览器


如上面所说,IE只支持事件冒泡,不支持事件捕获,它也不支持addEventListener函数,不会用第三个参数来表示是冒泡还是捕获,它提供了另一个函数attachEvent。

element1.attachEvent("onclick", doSomething2);
element2.attachEvent("onclick", doSomething);

都是事件冒泡,因此,这样绑定后,点击element2后,没有事件捕获,从底到顶进行事件冒泡,先执行doSomething,再执行doSomething2。

这些是看的一篇英文资料加自己的总结,下一次整理一下阻止事件冒泡的资料。

原书名为ppk on javascript.中文版本当当网地址:http://product.dangdang.com/product.aspx?product_id=20170876

分享到:
评论

相关推荐

    JavaScript事件冒泡与事件捕获实例分析

    本文实例讲述了JavaScript事件冒泡与事件捕获。分享给大家供大家参考,具体如下: 1、事件冒泡 在一个对象上触发某类事件,如onclick事件等,在其祖先节点上也会依次触发该事件。 <body onclick=alert('body...

    javascript 中事件冒泡和事件捕获机制的详解

    javascript 中事件冒泡和事件捕获机制的详解 二者作用:描述事件触发时序问题 事件捕获:从document到触发事件的那个节点,即自上而下的去触发事件—由外到内 事件冒泡:自下而上的去触发事件—由内到外 绑定事件...

    【JavaScript源代码】javascript事件冒泡,事件捕获和事件委托详解.docx

    2. **事件捕获**:与事件冒泡相反,事件捕获自DOM树的根部(通常是`document`)开始,向下传播到目标元素。`addEventListener`方法的第三个参数`useCapture`用于启用事件捕获,值为`true`表示在捕获阶段处理事件。...

    JavaScript事件冒泡示例.html

    了解事件冒泡后,我们还可以遇到事件捕获的概念,与事件冒泡相反,事件捕获是从根节点开始向下传播到目标元素。通常,事件捕获用于在事件到达目标元素之前进行预处理。可以通过在`addEventListener`的第三个参数传入...

    简析JavaScript事件、以及捕获和冒泡

    3. DOM2级事件处理:使用`addEventListener`和`removeEventListener`方法,这提供了更多的灵活性和控制,例如支持多个事件监听器和区分捕获与冒泡。 事件冒泡是JavaScript事件处理的典型模式,通常更受开发者欢迎,...

    事件冒泡及捕获

    事件捕获则与事件冒泡相反,它从最不具体的节点(DOM树的根节点)开始,向下传播到最具体的节点。在捕获阶段,事件首先由最顶层的元素接收,然后逐级向下传递到目标元素。这种方式使得在事件到达目标元素之前,可以...

    JS中绑定事件顺序(事件冒泡与事件捕获区别)

    JavaScript中的事件处理机制是网页交互的核心,其中包括了两种主要的事件传播模式:事件冒泡(Bubbling)和事件捕获(Cropping)。事件冒泡是指事件从最深的节点开始,然后逐级向上传播到最外层的节点。而事件捕获则...

    JS冒泡事件与事件捕获实例详解

    冒泡事件和事件捕获是JavaScript中...总之,冒泡事件与事件捕获是JavaScript中事件处理的核心概念,它们提供了一种机制来控制事件在DOM结构中的传播方式,对于实现复杂的交互逻辑、提高Web应用性能和用户体验至关重要。

    【JavaScript源代码】基于事件冒泡、事件捕获和事件委托详解.docx

    这个顺序与事件冒泡相反,但并不常见于日常编程中。 事件委托是一种优化事件处理的方法,特别是在处理大量动态生成的元素时。在事件委托中,我们不在每个子元素上直接绑定事件处理器,而是将其绑定到它们的共同祖先...

    事件冒泡解决方案

    在JavaScript的DOM编程中,事件冒泡是一个非常重要的概念,尤其在处理多级嵌套元素的事件时。事件冒泡是指事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上转播至最不具体的节点(文档...

    javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结

    总之,JavaScript的事件处理是构建动态网页的重要手段,熟练掌握事件绑定、事件冒泡、事件捕获和事件执行顺序能帮助开发者编写更高效、更易于维护的代码。通过实践和不断学习,可以更深入地理解和运用这些概念。

    【JavaScript源代码】JavaScript中事件冒泡机制示例详析.docx

    事件冒泡阶段则与之相反,是从目标节点开始向上冒泡到根节点。当事件在目标元素上触发后,它会依次经过其所有父节点,直到到达DOM树的顶层。这种机制允许在任何包含目标元素的祖先元素上处理事件,使得事件处理可以...

    javascript事件冒泡和事件捕获详解

    在探讨JavaScript事件冒泡和事件捕获之前,我们首先要了解什么是事件流。事件流指的是当事件发生在DOM树中的元素上时,事件处理的顺序。为了有效地组织事件处理程序,不同的浏览器厂商提出了不同的事件处理机制:...

    2022年生动详细解释javascript的冒泡和捕获.docx

    JavaScript中的事件冒泡和事件捕获是事件处理的重要概念,它们在DOM(文档对象模型)中定义了事件触发的顺序。事件冒泡和捕获是两种不同的事件传播机制,它们在不同浏览器的历史发展中曾导致兼容性问题,但现在已经...

    JS事件冒泡浏览器兼容

    JavaScript事件冒泡是Web开发中的一个关键概念,它涉及到用户与网页交互时事件的传递机制。在浏览器环境中,事件冒泡是指事件从最深的节点开始,然后逐级向上层节点传播事件的过程。这个过程允许事件处理函数在不同...

    利用事件冒泡(Event Bubbling )获取鼠标下的元素属性

    在JavaScript编程中,事件处理是不可或缺的一部分,尤其是事件冒泡(Event Bubbling)机制,它是理解DOM(Document Object Model)事件处理的关键概念之一。事件冒泡是指事件开始时由最具体的元素(文档中嵌套层次...

    详解javascript事件冒泡

    事件冒泡是JavaScript中非常重要的一个概念,它描述了事件在DOM树结构中的传播方式。在事件冒泡过程中,一旦某个元素上的事件被触发,那么这个事件会从元素本身开始,沿着DOM树向上层元素传播,直到到达根节点。在此...

Global site tag (gtag.js) - Google Analytics