`

JavaScript中的事件传播 捕捉、发生、起泡

阅读更多
首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生。

当事件发生后,这个事件就要开始传播。为什么要传播呢?因为事件源本身并没有处理事件的能力。例如我们点击一个按钮时,就会产生一个click事件,但这个按钮本身不能处理这个事件(废话),事件必须从这个按钮传播出去,从而到达能够处理这个事件的代码中(例如我们给按钮的onclick属性赋一个函数的名字,就是让这个函数去处理该按钮的click事件)。

当事件在传播过程中,找到了一个能够处理它的函数,这时候我们就说这个函数捕捉到了这个事件。

说到这里,关键的问题来了,那就是一个函数是如何捕捉一个事件的呢?这就涉及到事件的冒泡了。

为了更好地理解冒泡的概念,我建议你现在想象一下你的面前放着一杯水,但这杯水和我们平时看到的有点点不同,它分为数层,每一层又分成一或多个区域,最顶层是我们熟悉的窗口对象(即window对象),下一层分为好几个区域(document对象、history对象等等),而document对象的下一层又分为多个子对象。

这些对象的层次关系构成了DOM中的对象树。
事件的传播是有方向的,当点击一个按钮时所产生的事件从这个按钮处开始向上传播(就像一个水泡从杯底冒上来,这就是之所以叫事件冒泡的原因),但这个事件总是寻找特定的属性是否有值。例如按钮的click事件先寻找在按钮上是否有onclick属性的有意义的定义(即该属性指向一个存在的函数或一段可执行的语句),如果有,执行这个函数或语句;然后事件继续向上传播,到达按钮的上一层对象(例如一个form对象或document对象,总之是包含了按钮的父对象),如果该对象也定义了onclick属性,则执行属性的值。

所以,如果这个按钮上面有3层(form、document、window),且这三层都定义了onclick属性,则当按钮的click事件产生时,将会调用4个(包括按钮本身的一个)函数或执行4段语句。

事件的这几个特性在0级dom中也是适用的。


<html onclick="alert('html')">
    <head>
        <title>Event Propagation Example</title>
    </head>
    <body onclick="alert('body')">
 
        <input type="button" value="Click Me" onclick="alert('input')" />
    </body>
</html>
1
0
分享到:
评论

相关推荐

    javascript防止事件传播

    总之,理解和掌握JavaScript中的事件传播以及防止事件传播的方法,对于编写高效且具有良好用户体验的前端代码至关重要。通过合理使用这些方法,我们可以精确控制事件的执行流程,避免不必要的交互影响,提升用户界面...

    JavaScript 事件处理 事件绑定 示例代码

    事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例...

    javaScript中常用事件

    本文将深入探讨JavaScript中的一些常用事件,以及它们如何工作,帮助初学者更好地理解并运用到实际项目中。 一、事件概述 事件是JavaScript中的一种机制,它允许程序响应用户的操作或者浏览器的状态变化。事件处理...

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

    JavaScript中的事件冒泡机制是DOM事件处理的核心概念之一,它涉及到事件在DOM树中的传播方式。事件流主要有三种阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。 事件捕获阶段是从DOM树的根节点开始,沿着树向下...

    JavaScript动态加载事件

    实现JavaScript 动态加载事件

    javascript常用事件应用

    6. **事件冒泡和事件捕获**:事件传播有冒泡和捕获两种模式。冒泡是从最深的节点开始,逐级向上层元素传播;捕获则相反,从最外层元素开始向下层元素传播。使用`event.stopPropagation()`可以阻止事件继续冒泡,`...

    JavaScript程序设计课件:第 5 章 事件和事件处理.ppt

    事件是指在用户与计算机交互过程中发生的动作或操作,例如鼠标单击、键盘输入、窗口加载等。事件处理器是指对事件的响应和处理,例如在鼠标单击按钮时弹出警示框。 理解事件 事件是指在日常生活和计算机交互过程中...

    JavaScript 事件处理 二级菜单级联 示例代码

    JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 ...

    JavaScript捕捉事件和阻止冒泡事件实例分析

    这种事件传播的方式就像气泡从水中向上升一样,从内部元素开始,直到根元素。与冒泡相对的是事件捕捉,它是指事件从根元素开始,向下逐级传播到目标元素的过程。 知识点二:事件冒泡的影响 在事件冒泡过程中,如果...

    JavaScript事件冒泡示例.html

    在JavaScript中,我们可以利用事件处理程序来响应这些事件。主要有三种方式来添加事件处理程序:HTML属性、DOM0级方法和DOM2级事件监听器。 1. HTML属性:这是最基础的方法,直接在HTML元素上设置`onclick`、`...

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

    例如,可以使用捕获来阻止不必要的事件传播,或者在父元素上处理多个子元素共享的事件。 在实际开发中,理解事件冒泡和捕获的差异对于优化性能和编写可维护的代码至关重要。合理的事件处理策略可以提高用户体验,...

    扣代码工具 javascript事件 捕获者2.0.zip

    在JavaScript中,这两种模式可以同时存在,事件捕获先于事件冒泡执行。 "扣代码工具 JavaScript事件捕获者2.0.zip"可能是一个帮助开发者观察和分析JavaScript事件处理过程的工具,它可以展示事件是如何被触发、捕获...

    实验项目二十二  javascript事件处理.doc

    在 JavaScript 中,我们可以使用 onclick 事件来响应鼠标单击事件,ondblclick 事件来响应鼠标双击事件,onmouseover 事件来响应鼠标悬停事件等。 例如,我们可以使用 onclick 事件来响应鼠标单击事件,如下所示: ...

    JAVASCRIPT事件与动态页面编程.pdf

    事件监视器告知JAVASCRIPT解释器当指定事件发生时,运行何种JAVASCRIPT代码。 使用JAVASCRIPT事件监视器需要遵循以下原则: 1. 事件监视器须作为某HTML标记(如BODY、FORM、IMG等)的一个属性名。 2. 嵌入HTML文档...

    基于事件的JavaScript的浏览器

    在JavaScript中,事件是一种通知机制,用于告知代码何时发生了特定的状况,比如用户点击了按钮,或者页面完成了加载。事件驱动编程的关键组成部分包括事件、事件处理器(或事件监听器)和事件触发器。 1. **事件**...

    Javascript Event(事件)的传播与冒泡

    JavaScript中的事件传播与冒泡是理解DOM交互时的关键概念,主要涉及到事件的处理方式和执行顺序。事件传播是指当一个事件(如点击)在DOM树中发生时,它会从最深的节点(事件的目标节点)开始,逐级向上层节点传播。...

    javascript事件的传播基础实例讲解(35)

    当点击最内层的`div#box3`时,按照事件传播的顺序,会依次经历捕获阶段(虽然在非IE8浏览器中默认不执行)、目标阶段(在`div#box3`上触发事件处理函数)和冒泡阶段(依次在`div#box2`和`div#box1`上触发事件处理...

    JavaScript Tools Guide CC.pdf

    3. **脚本事件**:Photoshop支持通过JavaScript设置脚本事件,当特定事件触发时(如打开文件、保存文件等),会自动执行相应的脚本代码。 4. **图层和对象操作**:JavaScript允许对Photoshop中的图层、选区、路径、...

    JavaScript中使用stopPropagation函数停止事件传播例子

    在JavaScript中,事件传播是DOM元素之间的一种交互方式,它分为三个阶段:捕获阶段、目标阶段和冒泡阶段。事件传播模型允许事件从最深的节点(事件目标)向上冒泡到最外层的节点(文档)。在这个过程中,每个节点都...

Global site tag (gtag.js) - Google Analytics