《成长笔记》js中关于事件传播的学习,以及preventDefault(),stopPropagation(),stopImmediatePropagation()的区别
最近在拜读网道中的JavaScript教程,对事件部分有些体会,想在此记录下来。
事件传播
一个事件发生后会在子元素和父元素之间传播,传播分为三个阶段,分别为:捕获阶段,目标阶段,和冒泡阶段。以点击p元素为例,如下代码:
<body>
<div id="DIV">
<p id="P">点击我!</p>
</div>
<script>
var div = document.getElementById("DIV");
var p = document.getElementById("P");
div.addEventListener('click', function(){
console.log("DIV捕获阶段被触发");
}, true);
p.addEventListener('click', function(){
console.log("P在目标阶段被触发");
}, true);
p.addEventListener('click', function(){
console.log("P再次在目标阶段触发");
}, false);
div.addEventListener('click', function(){
console.log("DIV在冒泡阶段被触发");
}, false);
</script>
</body>
运行结果为:
捕获阶段:从window对象传导到目标节点,称为“捕获阶段”,例子中为:window对象——>document对象——>html节点——>body节点——>div节点——>p节点
目标阶段:在目标节点上触发,称为“目标阶段”,例子以点击p元素为例,所以p节点为目标节点,事件传播至p节点为目标阶段。
冒泡阶段:从目标节点传导回window对象,称为“冒泡阶段”,例子中为:p节点——>div节点——>body节点——>html节点——>document对象——>window对象
阻止事件相关方法的比较
通过实例来区分preventDefault(),stopPropagation(),stopImmediatePropagation()的区别
preventDefault():在上述例子的代码中加入preventDefault()函数。
<script>
var div = document.getElementById("DIV");
var p = document.getElementById("P");
div.addEventListener('click', function(e){
console.log("DIV捕获阶段被触发");
}, true);
p.addEventListener('click', function(e){
e.preventDefault();
console.log("P在目标阶段被触发");
}, true);
p.addEventListener('click', function(e){
console.log("P再次在目标阶段触发");
}, false);
div.addEventListener('click', function(e){
console.log("DIV在冒泡阶段被触发");
}, false);
</script>
运行结果:
preventDefault只是阻止浏览器的默认行为(比如在点击链接后,浏览器默认会跳转到另一个页面,使用这个方法以后,就不会跳转了;再比如,按一下空格键,页面向下滚动一段距离,使用这个方法以后也不会滚动了。),但是不会阻止自己定义的事件监听函数,也不会阻止事件的传播。而且该方法生效的前提是,事件对象的cancelable属性为true,如果为false,调用该方法没有任何效果
stopPropagation():在例子中加入stopPropagation()函数
<script>
var div = document.getElementById("DIV");
var p = document.getElementById("P");
div.addEventListener('click', function(e){
console.log("DIV捕获阶段被触发");
}, true);
p.addEventListener('click', function(e){
e.stopPropagation();
console.log("P在目标阶段被触发");
}, true);
p.addEventListener('click', function(e){
console.log("P再次在目标阶段触发");
}, false);
div.addEventListener('click', function(e){
console.log("DIV在冒泡阶段被触发");
}, false);
</script>
运行结果:
stopPropagation函数阻止事件在DOM中进行传播,但是不会阻止在该元素上面的事件监听函数,例子中p元素调用stopPropagation后,p作为目标阶段的元素,后面的冒泡阶段的事件将不会再触发,但是p元素本身的事件监听函数还是会继续执行。
stopImmediatePropagation:在例子中加入stopImmediatePropagation()函数
<script>
var div = document.getElementById("DIV");
var p = document.getElementById("P");
div.addEventListener('click', function(e){
console.log("DIV捕获阶段被触发");
}, true);
p.addEventListener('click', function(e){
e.stopImmediatePropagation();
console.log("P在目标阶段被触发");
}, true);
p.addEventListener('click', function(e){
console.log("P再次在目标阶段触发");
}, false);
div.addEventListener('click', function(e){
console.log("DIV在冒泡阶段被触发");
}, false);
</script>
运行结果:
stopImmediatePropagation()函数比stopPropagation()函数更加直接,它不但阻止了事件的传播,还强制该事件监听函数后面的所有事件监听函数都不执行,即使是在同一个元素上面的事件监听函数。例子中,p元素有两个事件监听函数,在第一个函数调用后stopImmediatePropagation()函数后,第二个事件监听函数也不在执行。