首先你要明白一点,当一个事件发生的时候,该事件总是有一个事件源,即引发这个事件的对象,一个事件不能凭空产生,这就是事件的发生。
当事件发生后,这个事件就要开始传播。为什么要传播呢?因为事件源本身并没有处理事件的能力。例如我们点击一个按钮时,就会产生一个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>
分享到:
相关推荐
总之,理解和掌握JavaScript中的事件传播以及防止事件传播的方法,对于编写高效且具有良好用户体验的前端代码至关重要。通过合理使用这些方法,我们可以精确控制事件的执行流程,避免不必要的交互影响,提升用户界面...
事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例代码JavaScript 事件处理 事件绑定 示例...
这中事件流处理方式,例如, Netscape Navigator 4.0 浏览器的事件流处理。 DOM 事件流 DOM 事件流是指同时支持事件冒泡和事件捕获,是前面两种事件流的整合,在总个流中,它是先处理事件捕获,再处理事件冒泡。...
实验报告详细介绍了JavaScript事件处理的相关知识,这在Web开发中是非常关键的一部分,因为事件是用户与网页交互的主要方式。以下是对各个知识点的详细说明: 1. **JavaScript事件基本概念**: - **事件**:是用户...
JavaScript 事件处理 常用事件(鼠标事件、键盘事件、表单事件)示例代码JavaScript 事件处理 常用事件(鼠标事件、键盘事件、表单事件)示例代码JavaScript 事件处理 常用事件(鼠标事件、键盘事件、表单事件)示例...
JavaScript中的事件冒泡机制是DOM事件处理的核心概念之一,它涉及到事件在DOM树中的传播方式。事件流主要有三种阶段:事件捕获阶段、处于目标阶段和事件冒泡阶段。 事件捕获阶段是从DOM树的根节点开始,沿着树向下...
在JavaScript中,事件是用户或浏览器对网页进行操作时触发的特定动作,比如点击按钮、鼠标移动等。本文将详细介绍JavaScript事件,包括异步事件处理、事件阶段以及事件对象。 1. 异步事件处理 JavaScript不支持多...
6. **事件冒泡和事件捕获**:事件传播有冒泡和捕获两种模式。冒泡是从最深的节点开始,逐级向上层元素传播;捕获则相反,从最外层元素开始向下层元素传播。使用`event.stopPropagation()`可以阻止事件继续冒泡,`...
六、阻止默认行为与停止事件传播 1. `event.preventDefault()`阻止事件的默认行为,如链接的跳转、表单的提交等。 2. `event.stopPropagation()`阻止事件的进一步冒泡,防止上级元素的事件处理程序被执行。 七、...
标题中的"JavaScript事件学习小结(一)事件流"指的是JavaScript中的事件处理机制,特别是事件流的概念。事件流描述了在DOM(文档对象模型)中事件如何从根节点传播到具体的元素节点。在JavaScript中,事件是用户与...
JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 示例代码JavaScript 事件处理 二级菜单级联 ...
DOM2事件模型允许开发者在事件传播过程中使用event.stopPropagation()和preventDefault()方法来控制事件的默认行为和传播。事件处理器的注册和移除是通过addEventListener和removeEventListener函数实现的。 IE事件...
这种事件传播的方式就像气泡从水中向上升一样,从内部元素开始,直到根元素。与冒泡相对的是事件捕捉,它是指事件从根元素开始,向下逐级传播到目标元素的过程。 知识点二:事件冒泡的影响 在事件冒泡过程中,如果...
在 JavaScript 中,我们可以使用 onclick 事件来响应鼠标单击事件,ondblclick 事件来响应鼠标双击事件,onmouseover 事件来响应鼠标悬停事件等。 例如,我们可以使用 onclick 事件来响应鼠标单击事件,如下所示: ...
事件监视器告知JAVASCRIPT解释器当指定事件发生时,运行何种JAVASCRIPT代码。 使用JAVASCRIPT事件监视器需要遵循以下原则: 1. 事件监视器须作为某HTML标记(如BODY、FORM、IMG等)的一个属性名。 2. 嵌入HTML文档...
JavaScript,简称JS,是一种广泛应用于Web开发的轻量级、解释型编程语言,以其灵活性和丰富的功能特性在前端开发中占据主导地位。本资源提供的"JavaScript中文手册(完整版)"是一个全面的参考资料,旨在帮助开发者...
在JavaScript中,事件是一种通知机制,用于告知代码何时发生了特定的状况,比如用户点击了按钮,或者页面完成了加载。事件驱动编程的关键组成部分包括事件、事件处理器(或事件监听器)和事件触发器。 1. **事件**...
在JavaScript中,基础语法包括变量声明(var、let、const)、数据类型(如字符串、数字、布尔值、null、undefined、对象、数组、Symbol、BigInt)以及运算符(算术、比较、逻辑、位运算、赋值)。控制结构有条件语句...
同时,还有一种事件传播方式叫做事件捕获,它从最不具体的节点向下传播。可以通过`addEventListener`的第三个参数设置事件传播模式。 3. **事件对象**:在事件处理函数中,会自动传递一个事件对象,该对象包含了...
当点击最内层的`div#box3`时,按照事件传播的顺序,会依次经历捕获阶段(虽然在非IE8浏览器中默认不执行)、目标阶段(在`div#box3`上触发事件处理函数)和冒泡阶段(依次在`div#box2`和`div#box1`上触发事件处理...