JavaScript 事件流

简介: JavaScript 事件流

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

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

DOM 标准规定事件流包括三个阶段:事件捕获阶段处于目标阶段事件冒泡阶段。

参数为 true 时,顺序为 div -> p -> span。事件捕获阶段

参数为 false 时,顺序为 span -> p -> div。事件冒泡阶段 默认

注意:通过 on 绑定的事件,也是事件冒泡阶段执行。

常见用途:

事件代理:事件代理的原理用到的就是事件冒泡和目标元素,把事件添加到父元素,等待子

元素事件冒泡,并且判断是哪个子元素,从而做相应处理。

适用于子元素比较多,而且事件相同的情况下。

优点:将多个事件函数减少到一个,因为事件函数要驻留内存,这样就提高了性能。

这是不使用事件代理的写法,需要循环 li 标签绑定事件。如下:


这是使用事件代理的写法,通过事件对象来判断点击的是否 li 标签。如下:

e 表示 event 是事件对象模型,e || window.event e.target || e.srcElement 是兼容 IE 浏览

器的写法。toLowerCase() 是将字符串全部转换成小写。toUpperCase()是转换为大写。

相关文章
|
5月前
|
JavaScript 前端开发 UED
JS DOM 事件流与事件冒泡
【10月更文挑战第16天】理解 DOM 事件流和事件冒泡是掌握 JavaScript 事件处理的关键。通过合理利用事件冒泡,可以实现更高效、灵活的事件处理机制,提升用户体验和开发效率。在实际开发中,要根据具体情况灵活运用这些概念,以达到最佳的效果。
123 42
|
7月前
|
JavaScript 前端开发
JavaScript 事件流
JavaScript 事件流
59 1
|
8月前
|
JavaScript
js 事件流、事件冒泡、事件捕获、阻止事件的传播
js 事件流、事件冒泡、事件捕获、阻止事件的传播
118 1
|
10月前
|
JavaScript 前端开发
|
Web App开发 JavaScript 前端开发
JavaScript的事件流1
JavaScript的事件流
100 0
|
10月前
|
JavaScript 前端开发 API
探索JavaScript事件流:DOM中的神奇旅程
JavaScript中的事件流是一种机制,用于描述和处理事件在DOM树中的传播过程。了解事件流的属性和工作原理对于编写高效的事件处理代码和实现复杂的交互功能至关重要。本文将详细介绍JavaScript事件流的发展流程、属性以及应用场景,并提供一些代码示例和引用资料,帮助读者深入理解并应用这一重要的前端技术。
|
前端开发 JavaScript 开发者
带你读《现代Javascript高级教程》八、JavaScript事件流:深入理解事件处理和传播机制(1)
带你读《现代Javascript高级教程》八、JavaScript事件流:深入理解事件处理和传播机制(1)
119 0
|
前端开发 JavaScript
带你读《现代Javascript高级教程》八、JavaScript事件流:深入理解事件处理和传播机制(2)
带你读《现代Javascript高级教程》八、JavaScript事件流:深入理解事件处理和传播机制(2)
107 0
|
JavaScript 前端开发
带你读《现代Javascript高级教程》八、JavaScript事件流:深入理解事件处理和传播机制(3)
带你读《现代Javascript高级教程》八、JavaScript事件流:深入理解事件处理和传播机制(3)
|
JavaScript 前端开发 C++
JavaScript事件委托与事件流+牛客例题
JavaScript事件委托与事件流+牛客例题
77 0

热门文章

最新文章