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()的区别
后者只会阻止冒泡或者是捕获。 但是前者除此之外还会阻止该元素的其他事件发生,但是后者就不会阻止其他事件的发生