JS Event handler example - event capture and bubble

简介: JS Event handler example - event capture and bubble

Created by Jerry Wang, last modified on Jun 06, 2015


source link:  http://www.ido321.com/1570.html

这个example 有一个陷阱,如果测试用的script不写在window.ready事件里,将得不到效果。


image.png事件捕获和事件冒泡是事件流中的两个阶段,任何事件产生时,如点击一个按钮,将从最顶端的容器开始(一般是html的根节点)。浏览器会向下遍历DOM树直到找到触发事件的元素


点击button 1:image.pngimage.png

至此target node处理完了,继续处理hierarchy树的下一个节点:body. 此时event.target 还是button:image.pngimage.pngimage.png一旦浏览器找到该元素,事件流就进入事件目标阶段,该阶段完成后,浏览器会沿DOM树向上冒泡直到最顶层容器,看看是否有其它元素需要使用同一个事件。

大多数现代库使用冒泡监听,而在捕获阶段处理。浏览器包含一个方法来管理事件冒泡。事件处理程序可以调用stopPropagation告诉DOM事件停止冒泡


image.png第二个方式是调用 stopImmediatePropagation ,它不仅停止冒泡,也会阻止这个元素上其它监听当前事件的处理程序触发。然而,停止传播事件时要小心,因为你不知道是否有其它上层的DOM元素可能需要知道当前事件。

This example also shows how to raise and catch custom event via jQuery:


https://cloud.githubusercontent.com/assets/5669954/26556349/4ca0cb16-449a-11e7-8d2e-fb47d690b0f2.png)


相关文章
|
6月前
|
JavaScript 前端开发
JavaScript DOM 操作:什么是事件委托(Event Delegation)?有什么优势?
JavaScript DOM 操作:什么是事件委托(Event Delegation)?有什么优势?
123 1
|
6月前
|
消息中间件 存储 前端开发
JavaScript高级主题:解释一下 JavaScript 中的事件循环(Event Loop)。
JavaScript高级主题:解释一下 JavaScript 中的事件循环(Event Loop)。
59 0
|
3月前
|
JavaScript
Vue.js 中的 $v 和 $event 代表什么?
Vue.js 中的 $v 和 $event 代表什么?
|
4月前
|
JavaScript 前端开发 API
js 运行机制(含异步机制、同步任务、异步任务、宏任务、微任务、Event Loop)
js 运行机制(含异步机制、同步任务、异步任务、宏任务、微任务、Event Loop)
46 0
|
6月前
|
前端开发 JavaScript
深入理解JavaScript的事件循环(Event Loop)
深入理解JavaScript的事件循环(Event Loop)
|
6月前
|
存储 JavaScript 前端开发
JS的执行原理,一文了解Event Loop事件循环、微任务、宏任务
了解JavaScript的事件循环和任务队列对于处理异步任务至关重要。事件循环由主线程和任务队列组成,当主线程执行完同步任务后,会检查任务队列,按顺序执行宏任务和微任务。宏任务包括`setTimeout`等,微任务如`Promise`的回调。在实际开发中,事件循环保证了代码的非阻塞执行,提高了用户体验。例如,`setTimeout`的回调会在当前宏任务结束后,所有微任务执行完才会执行。理解这一机制对于解决面试中的异步问题非常有帮助。
71 0
JS的执行原理,一文了解Event Loop事件循环、微任务、宏任务
|
6月前
|
JavaScript 前端开发
js开发:请解释什么是事件委托(event delegation),并给出一个示例。
事件委托是JavaScript中优化事件处理的技术,通过绑定事件处理器到共享的父元素,利用事件冒泡机制来处理子元素的事件。这种方法能提升性能、简化代码并降低内存消耗。示例展示了如何在父元素上监听`click`事件,然后通过`event.target`识别触发事件的具体子元素(如`<li>`),实现对动态生成列表项的点击事件处理。
49 1
|
6月前
|
JavaScript 前端开发
JavaScript DOM 操作:解释一下事件冒泡(Event Bubbling)和事件捕获(Event Capturing)。
【4月更文挑战第14天】JavaScript中的事件处理包括冒泡和捕获两个阶段。事件冒泡是从根节点向目标元素逐级向上传播事件,允许在元素内部捕获外部事件。事件捕获则相反,从根节点向下到目标元素,使得外部能捕获内部事件。`addEventListener`方法用于添加事件监听器,通过`useCapture`参数切换冒泡或捕获阶段处理事件,默认为`false`(冒泡阶段)。兼容性考虑,推荐使用`addEventListener`。
49 0
|
存储 移动开发 JavaScript
JS中的事件学习event
JS中的事件学习event
91 0
|
JavaScript 前端开发 API
(译)看得见的 JavaScript:事件循环(Event Loop)
(译)看得见的 JavaScript:事件循环(Event Loop)
86 1