浅谈js中的事件传播流程
java Script 事件传播流程
想要知道js中的事件传播流程,首先需要知道什么是事件,以及事件有什么作用。
事件
事件是JS与HTML之间的交互的实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。
事件流
事件流描述的是从页面中接受事件的顺序,首先来看这张图
捕获阶段
事件捕获过程:当我们点击TEXT时,首先是window->document->body->div->text.这个过程称为事件捕获,W3C浏览器的标准执行流程。
目标阶段
在目标节点上触发事件,被称为“目标阶段”
冒泡阶段
事件冒泡过程:text->div->body->document->window.这个过程称为事件冒泡。IE浏览器只支持冒泡,不支持捕获。W3C浏览器先执行捕获,后执行冒泡。
DOM事件流
“DOM2级事件”规定的事件包括三个阶段: 事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获,为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段,可以在这个阶段对事件做出响应。
还是以之前的点击按钮为例,在DOM事件流中,捕获阶段,”click”事件从document开始向下传递到body元素(注意,实际目标button在捕获阶段不会接收到事件)。目标阶段,button元素接收到”click”事件。最后,冒泡阶段,事件又被传播回文档。
DOM2级事件处理流程
DOM2级事件”规定了两个方法用于操作事件处理程序:addEventListener()和removeEventListener()。所有的节点都包含这两个方法,接收三个参数:要处理的事件名,作为事件处理程序的函数和一个布尔值。最后的参数如果是true,表示在事件捕获阶段调用事件处理程序,如果是false,表示在事件冒泡阶段调用事件处理程序。
<div id="div" style="width: 200px;height: 200px;background: #0ff;"> <p id="p" style="background: #f00;">单机事件</p> </div>
如果给这两个标签添加冒泡和捕获事件,则该一共会触发四次事件
var oP = document.getElementById("p"); var oDiv = document.getElementById("div"); oP.addEventListener("click", function(e){ console.log("oP冒泡"); }, false); oP.addEventListener("click", function(e){ console.log("oP捕获"); }, true); oDiv.addEventListener("click", function(e){ console.log("oDiv冒泡"); }, false); oDiv.addEventListener("click", function(e){ console.log("oDiv捕获"); }, true);
阻止事件捕获和冒泡
在浏览器中添加事件时,默认有冒泡行为,有时我们需要阻止这种行为。
- 在创建的事件时,在事件的执行函数中添加return false
oP.onclick=function(){ console.log("oP"); return false; }
- 在创建的事件时,在事件的执行函数中添加event.stopPropagation()方法既可以阻止事件冒泡,也可以阻止事件捕获,也可以阻止处于目标阶段。
oP.onclick=function(){ console.log("oP"); event.stopPropagation(); }
- IE浏览器阻止事件冒泡,在事件的执行函数中添加window.event.cancelBubble = true;
oP.onclick=function(){ console.log("oP"); window.event.cancelBubble = true; }
- 在创建的事件时,在事件的执行函数中添加event.stopImmediatePropagation()方法
oP.onclick=function(){ console.log("oP"); event.stopImmediatePropagation(); }
stopImmediatePropagation() 和 stopPropagation()的区别
后者只会阻止冒泡或者是捕获。 但是前者除此之外还会阻止该元素的其他事件发生,但是后者就不会阻止其他事件的发生
- js中事件传播流程
- 浅谈移动端之js touch事件 手势滑动事件
- JS事件传播-冒泡和捕获
- JS-----------阻止事件的冒泡传播
- 浅谈js的事件冒泡机制
- Cpage.js组件之间事件传播
- js事件传播的一个疑惑
- 浅谈js之事件流
- 浅谈JS事件冒泡
- 浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
- js事件对象兼容处理及传播机制
- js 事件阻止传播方法,准确定位事件源
- 浅谈android 点击事件分发处理流程
- JS 传播事件、取消事件默认行为、阻止事件传播
- 浅谈js之事件处理
- 浅谈node.js 回调函数与事件机制
- js阻止事件的传播
- js 事件的传播机制(实例讲解)
- [JS]笔记12之事件机制--事件冒泡和捕获--事件监听--阻止事件传播
- 浅谈js之事件处理