JS事件冒泡和事件代理（委托）

最新推荐文章于 2024-06-10 17:00:16 发布

菜鸟搬砖记

最新推荐文章于 2024-06-10 17:00:16 发布

阅读量1.1w

点赞数 2

分类专栏： JavaScript大杂烩文章标签： js 事件冒泡事件代理事件委托

本文链接：https://blog.csdn.net/hope93/article/details/91345214

版权

JavaScript大杂烩专栏收录该内容

21 篇文章 9 订阅

订阅专栏

事件冒泡

什么是事件冒泡？

当一个元素接收到事件的时候，会把他接收到的事件传给父级，一直传到window （注意这里传递的仅仅是事件并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件也不会有什么表现但事件确实传递了。）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
   <div id='parentID' onclick="parentfunc()">
       <div id='childID' onclick="childfunc()">你好</div>
   </div>

    <script>
        function parentfunc() {
            alert('父级事件触发了！')
        }

        function childfunc(){
            alert('子级事件触发了！')
        }
    </script>
</body>
</html>

以上代码，触发了childID的点击事件，但是他的父级也会被触发，这个情况就是冒泡排序，那么如何阻止冒泡排序呢，如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
   <div id='parentID' onclick="parentfunc()">
       <div id='childID' onclick="childfunc()">你好</div>
   </div>

    <script>
        function parentfunc() {
            alert('父级事件触发了！')
        }

        function childfunc(){
            alert('子级事件触发了！')
            stopBubble();
        }

        function stopBubble(e) {
          //如果提供了事件对象，则这是一个非IE浏览器
          if ( e && e.stopPropagation ){
            //因此它支持W3C的stopPropagation()方法
            e.stopPropagation();
          }else{
            //否则，我们需要使用IE的方式来取消事件冒泡
            window.event.cancelBubble = true;
          }
          
        }
    </script>
</body>
</html>

阻止冒泡排序有两种情况，如下：

标准的W3C 方式：e.stopPropagation();这里的stopPropagation是标准的事件对象的一个方法，调用即可

非标准的IE方式:ev.cancelBubble=true;  这里的cancelBubble是 IE事件对象的属性，设为true就可以了

事件代理（委托）

事件委托是利用事件的冒泡原理来实现的，比如我们平时在给ul中的li添加事件的时候，我们都是通过for循环一个个添加，如果li很多个的话，其实就有点占内存了，这个时候可以用事件代理来优化性能，如下：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <ul id = 'ulid' onclick='clickfunc()'>
        <li>第1个li</li>
        <li>第2个li</li>
        <li>第3个li</li>
        <li>第4个li</li>
        <li>第5个li</li>
    </ul>

    <script>
        function clickfunc(ev) {
            var ev = ev || window.event;
            var oLi = ev.srcElement || ev.target;
            if(oLi.nodeName.toLowerCase() == 'li'){
                alert(oLi.innerText)
            }      
         
        }
      
    </script>
</body>
</html>

这里所有的li事件都写在ul中，通过节点去判断是否为li节点，即可

菜鸟搬砖记

关注

2
点赞
踩
34

收藏

觉得还不错? 一键收藏
0
评论
JS事件冒泡和事件代理（委托）

事件冒泡什么是事件冒泡？当一个元素接收到事件的时候，会把他接收到的事件传给父级，一直传到window （注意这里传递的仅仅是事件并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件也不会有什么表现但事件确实传递了。）<!DOCTYPE html><html lang="en"><head> <meta charse...
复制链接

扫一扫