JavaScript事件处理的例子：事件捕捉和冒泡

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

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

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

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

点击button 1：

target: button

至此target node处理完了，继续处理hierarchy树的下一个节点：body. 此时event.target 还是button：

然后继续处理body下面的div 节点：

找到目的节点了：

一旦浏览器找到该元素，事件流就进入事件目标阶段，该阶段完成后，浏览器会沿DOM树向上冒泡直到最顶层容器，看看是否有其它元素需要使用同一个事件。

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

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

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

JavaScript事件处理的例子：事件捕捉和冒泡 - event capture and bubble相关推荐

javascript的阻止默认事件和阻止冒泡事件
这两个方面的知识,在妙味课堂中有听过,再次复习一下: 原文来自:[http://www.cnblogs.com/Essence/p/4266618.html] 事件冒泡与默认行为在说事件冒泡之前,我 ...
JavaScript: 最简单的事件代理（JS Event Proxy）原理代码
打开 http://jsbin.com (JS练兵场),方便尝试使用案例代码. 假设有HTML <ul id="parent-list"><li id=" ...
Javascript事件模型系列（二）事件的捕获-冒泡机制及事件委托机制
一.事件的捕获与冒泡由W3C规定的DOM2标准中,一次事件的完整过程包括三步:捕获→执行目标元素的监听函数→冒泡,在捕获和冒泡阶段,会依次检查途径的每个节点,如果该节点注册了相应的监听函数,则执行监 ...
JavaScript 详说事件机制之冒泡、捕获、传播、委托
DOM事件流(event flow )存在三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段. 事件捕获(event capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会 ...
JavaScript 详说事件流（冒泡、捕获、传播、委托）
事件流事件流描述的是从页面中接收事件的顺序. 标准DOM事件流存在三个阶段:事件捕获阶段.处于目标阶段和事件冒泡阶段. 事件捕获:当触发事件时,浏览器会从根节点开始由外到内进行事件传播,即点击了子元 ...
JavaScript高级程序设计笔记事件冒泡和事件捕获
1.事件冒泡要理解事件冒泡,就得先知道事件流.事件流描述的是从页面接收事件的顺序,比如如下的代码: <body><div> click me!</div> < ...
理清“事件捕捉”和“事件冒泡”
"事件捕捉"和"事件冒泡"是基于DOM节点树上的DOM事件流,他会以特定的顺序在DOM节点树上进行传播 DOM节点树: 我们看一下事件捕捉和事件冒泡的基本定义 ...
事件模型、事件流（冒泡与捕获）、事件代理
本文原链接:https://www.cnblogs.com/hngdlxy143/p/9068282.html https://www.jb51.net/article/139997.htm 事件模型 ...
JavaScript与HTML交互——事件
JavaScript和HTML的交互是通过事件实现的.JavaScript采用异步事件驱动编程模型,当文档.浏览器.元素或与之相关对象发生特定事情时,浏览器会产生事件.如果JavaScript关注特定 ...

JavaScript事件处理的例子：事件捕捉和冒泡 - event capture and bubble

JavaScript事件处理的例子：事件捕捉和冒泡 - event capture and bubble相关推荐

最新文章

热门文章