JS之事件冒泡、取消冒泡、事件委托

最新推荐文章于 2023-09-07 23:27:53 发布

迷醉.

最新推荐文章于 2023-09-07 23:27:53 发布

阅读量377

点赞数 1

分类专栏：前端文章标签： js javascript event

本文链接：https://blog.csdn.net/qq_35270769/article/details/116933054

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

事件冒泡、取消冒泡、事件委托

事件冒泡：当某个元素事件触发，会沿着DOM树，向上"冒泡"，父元素及祖父元素都会接收到事件，一直向上到Document对象，然后到Window对象。

<style>
      #divOne {
          width: 300px;
          height: 300px;
          background-color: red;
      }
      #divTwo {
          width: 150px;
          height: 150px;
          background-color: yellow;
      }
      #spanOne {
          width: 100px;
          height: 100px;
          background-color: green;
      }
</style>
<script>
        window.onload=function(){
            document.getElementById("body").addEventListener("click", handlerEvent)
        }
        function handlerEvent(event){
            console.log("是否为冒泡事件：" + event.bubbles + ",产生事件的节点为："+ event.target.id+ ",触发该事件的元素为：" + event.currentTarget.id );
        }
</script>
<body id="body">
    <div id="divOne">
        <div id="divTwo">
                <span id="spanOne">点击我试试</span> 
        </div>
    </div>
</body>

效果图：
在这里插入图片描述

取消冒泡：在某个节点取消冒泡，事件不再向上传播。

<style>
      #divOne {
          width: 300px;
          height: 300px;
          background-color: red;
      }
      #divTwo {
          width: 150px;
          height: 150px;
          background-color: yellow;
      }
      #spanOne {
          width: 100px;
          height: 100px;
          background-color: green;
      }
</style>
<script>
        window.onload=function(){
            document.getElementById("spanOne").addEventListener("click", function(event){
                alert("点击了span");
                event.cancelBubble=true    //或用event.stopPropagation()
            });
            document.getElementById("divTwo").addEventListener("click", function(event){
                alert("点击了第二个div");
                event.cancelBubble=true
            });
            document.getElementById("divOne").addEventListener("click", function(event){
                alert("点击了第一个div");
                event.cancelBubble=true
            })

        }
</script>
<body id="body">
    <div id="divOne">
        <div id="divTwo">
                <span id="spanOne">点击我试试</span> 
        </div>
    </div>
</body>

效果图：

在这里插入图片描述
3.事件委托：子元素自身不实现响应逻辑，即将子元素的处理函数交给父元素来处理的这一过程。

<style>
        #divOne {
            width: 300px;
            height: 300px;
            background-color: red;
        }

        #divTwo {
            width: 150px;
            height: 150px;
            background-color: yellow;
        }

        #spanOne {
            width: 100px;
            height: 100px;
            background-color: green;
        }
</style>
<script>
        window.onload = function () {
            document.getElementById("body").addEventListener("click", handlerEvent)
        };
        function handlerEvent(event) {
            switch (event.target.id) {
                case 'spanOne':
                    alert("我是spanOne");
                    break;
                case 'divTwo':
                    alert("我是第二个div");
                    break;
                case 'divOne':
                    alert("我是第一个div");
                    break;
              	default: 
                   alert("没有点击相应的元素")
            }
        }
</script>
<body id="body">
    <div id="divOne">
        <div id="divTwo">
            <span id="spanOne">点击我试试</span>
        </div>
    </div>
</body>

效果图：
在这里插入图片描述

完。

文章供自身学习与巩固，若能帮到大家我也很开心。
如有不当和错误，望大家多指点，谢谢。

迷醉.

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS之事件冒泡、取消冒泡、事件委托

事件冒泡：当子元素事件触发，会沿着包含关系，向上传递，每一级都会接收到事件。<style> #divOne { width: 300px; height: 300px; background-color: red; } #divTwo { width: 150px; height: 150px; background-color: yell
复制链接

扫一扫