《成长笔记》js中关于事件的学习

最新推荐文章于 2024-05-04 10:21:02 发布

逐梦中的螺丝钉

最新推荐文章于 2024-05-04 10:21:02 发布

阅读量101

点赞数

分类专栏：成长笔记文章标签： js事件传播 preventDefault() stopPropagation() stopImmediatePropagation() 捕获阶段目标阶段冒泡阶段

本文链接：https://blog.csdn.net/lion_fox/article/details/103130431

版权

成长笔记专栏收录该内容

2 篇文章 0 订阅

订阅专栏

《成长笔记》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()函数后，第二个事件监听函数也不在执行。

逐梦中的螺丝钉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《成长笔记》js中关于事件的学习

《成长笔记》js中关于事件传播的学习，以及preventDefault()，stopPropagation()，stopImmediatePropagation()的区别最近在拜读网道中的JavaScript教程，对事件部分有些体会，想在此记录下来。事件传播一个事件发生后会在子元素和父元素之间传播，传播分为三个阶段，分别为：捕获阶段，目标阶段，和冒泡阶段。以点击p元素为例，如下代码：&lt...
复制链接

扫一扫