`

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事件

    这中事件流处理方式,例如, Netscape Navigator 4.0 浏览器的事件流处理。 DOM 事件流 DOM 事件流是指同时支持事件冒泡和事件捕获,是前面两种事件流的整合,在总个流中,它是先处理事件捕获,再处理事件冒泡。...

    JavaScript程序设计——事件处理实验报告.docx

    实验报告详细介绍了JavaScript事件处理的相关知识,这在Web开发中是非常关键的一部分,因为事件是用户与网页交互的主要方式。以下是对各个知识点的详细说明: 1. **JavaScript事件基本概念**: - **事件**:是用户...

    JavaScript 事件处理 常用事件(鼠标事件、键盘事件、表单事件)示例代码

    JavaScript 事件处理 常用事件(鼠标事件、键盘事件、表单事件)示例代码JavaScript 事件处理 常用事件(鼠标事件、键盘事件、表单事件)示例代码JavaScript 事件处理 常用事件(鼠标事件、键盘事件、表单事件)示例...

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

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

    javascript事件详解

    在JavaScript中,事件是用户或浏览器对网页进行操作时触发的特定动作,比如点击按钮、鼠标移动等。本文将详细介绍JavaScript事件,包括异步事件处理、事件阶段以及事件对象。 1. 异步事件处理 JavaScript不支持多...

    javascript常用事件应用

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

    使用JavaScript事件综合查询,js事件大全

    六、阻止默认行为与停止事件传播 1. `event.preventDefault()`阻止事件的默认行为,如链接的跳转、表单的提交等。 2. `event.stopPropagation()`阻止事件的进一步冒泡,防止上级元素的事件处理程序被执行。 七、...

    JavaScript事件学习小结(一)事件流

    标题中的"JavaScript事件学习小结(一)事件流"指的是JavaScript中的事件处理机制,特别是事件流的概念。事件流描述了在DOM(文档对象模型)中事件如何从根节点传播到具体的元素节点。在JavaScript中,事件是用户与...

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

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

    javascript事件模型介绍.doc

    DOM2事件模型允许开发者在事件传播过程中使用event.stopPropagation()和preventDefault()方法来控制事件的默认行为和传播。事件处理器的注册和移除是通过addEventListener和removeEventListener函数实现的。 IE事件...

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

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

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

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

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

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

    JavaScript中文手册(完整版).rar

    JavaScript,简称JS,是一种广泛应用于Web开发的轻量级、解释型编程语言,以其灵活性和丰富的功能特性在前端开发中占据主导地位。本资源提供的"JavaScript中文手册(完整版)"是一个全面的参考资料,旨在帮助开发者...

    基于事件的JavaScript的浏览器

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

    javascript中文参考手册

    在JavaScript中,基础语法包括变量声明(var、let、const)、数据类型(如字符串、数字、布尔值、null、undefined、对象、数组、Symbol、BigInt)以及运算符(算术、比较、逻辑、位运算、赋值)。控制结构有条件语句...

    实验8 JavaScript事件处理(4学时).zip

    同时,还有一种事件传播方式叫做事件捕获,它从最不具体的节点向下传播。可以通过`addEventListener`的第三个参数设置事件传播模式。 3. **事件对象**:在事件处理函数中,会自动传递一个事件对象,该对象包含了...

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

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

Global site tag (gtag.js) - Google Analytics