JavaScript 事件流

简介: JavaScript 事件流

JavaScript与HTML之间的交互是通过事件实现的,而用户与浏览器页面的互动也是通过事件来实现的事件就是文档或浏览器窗口中发生的一些特定的交互瞬间,所以分为两种事件,一是发生在 浏览器对象(BOM)上的事件,一是发生在 文档对象(DOM)上的事件。

浏览器规定了两种事件流模型: 捕获型事件流 和 冒泡型事件流 。

页面触发一个事件时,会按照一定的顺序来响应事件,事件的响应过程为事件流。

在实际中,事件流包括了三个阶段:事件捕获阶段,处于目标阶段,事件冒泡阶段,当点击一个div元素时,以下就是事件流的顺序:

1. 顶级对象(window)接收到click事件,然后逐级向下捕获

2. 目标元素(div)接收到到事件

3. 对事件做出响应,逐级向上冒泡到顶级对象。

事件冒泡是目标元素接受事件,然后逐级向上传播到顶级元素为止。

<!DOCTYPE html>
<html>
<head></head>
<body>
    <div>click me</div>
</body>
</html>

点击div元素,click事件会沿着DOM树向上传播,在每一级节点都会发生,冒泡顺序为:div -> body -> html -> document。


事件捕获与事件冒泡是相反的,是顶级元素先接收到事件,再逐级向下传播到目标元素为止

同样是以上示例,document对象会先接收到click事件,然后沿着DOM树向下传播到事件的目标元素,捕获顺序为:document -> html -> body -> div,浏览器都是从window对象开始捕获的。


目录
相关文章
|
3月前
|
JavaScript
js 事件流、事件冒泡、事件捕获、阻止事件的传播
js 事件流、事件冒泡、事件捕获、阻止事件的传播
41 1
|
5月前
|
JavaScript 前端开发
|
Web App开发 JavaScript 前端开发
JavaScript的事件流1
JavaScript的事件流
66 0
|
5月前
|
JavaScript 前端开发 API
探索JavaScript事件流:DOM中的神奇旅程
JavaScript中的事件流是一种机制,用于描述和处理事件在DOM树中的传播过程。了解事件流的属性和工作原理对于编写高效的事件处理代码和实现复杂的交互功能至关重要。本文将详细介绍JavaScript事件流的发展流程、属性以及应用场景,并提供一些代码示例和引用资料,帮助读者深入理解并应用这一重要的前端技术。
|
11月前
|
JavaScript 前端开发
JavaScript 事件流
JavaScript 事件流
32 0
|
12月前
|
前端开发 JavaScript 开发者
带你读《现代Javascript高级教程》八、JavaScript事件流:深入理解事件处理和传播机制(1)
带你读《现代Javascript高级教程》八、JavaScript事件流:深入理解事件处理和传播机制(1)
|
12月前
|
前端开发 JavaScript
带你读《现代Javascript高级教程》八、JavaScript事件流:深入理解事件处理和传播机制(2)
带你读《现代Javascript高级教程》八、JavaScript事件流:深入理解事件处理和传播机制(2)
|
12月前
|
JavaScript 前端开发
带你读《现代Javascript高级教程》八、JavaScript事件流:深入理解事件处理和传播机制(3)
带你读《现代Javascript高级教程》八、JavaScript事件流:深入理解事件处理和传播机制(3)
|
JavaScript 前端开发 C++
JavaScript事件委托与事件流+牛客例题
JavaScript事件委托与事件流+牛客例题
51 0
|
JavaScript
js中 事件流与阻止冒泡 事件对象.stopPropagation()
js中 事件流与阻止冒泡 事件对象.stopPropagation()