JS事件冒泡和事件代理（委托）（推荐阅读）

本文详细解析了事件冒泡机制，包括其工作原理、如何阻止事件冒泡，以及事件代理（委托）的概念和应用实例。通过具体的HTML和JavaScript代码示例，展示了如何在网页开发中有效利用事件冒泡和事件代理来优化代码结构和提高性能。

摘要由CSDN通过智能技术生成

事件冒泡
什么是事件冒泡？
当一个元素接收到事件的时候，会把他接收到的事件传给父级，一直传到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节点，即可