原生JS如何利用冒泡减少事件的触发，只代理给共有的父元素。

相信很多人都知道事件代理这个方法,因为在JQuery里面，已经封装好了。

$(父元素).on('click','父元素下的子元素标签名',function(){
   
   ...})

但是如果用原生JS来写呢？相信有部分都会懵逼了….因为我曾经也是懵逼的一员

elem.addEventListener(“事件名”,callback,false/true）;
为elem元素的指定”事件”，绑定callback回调函数
第三个参数: 设置是否在捕获阶段触发

如果你绑定了一个事件名，类似’click’、’mouseover’….等等一些事件
例如，如果你给某个绑定了click事件,那么当你点击该元素时，首先会从document开始捕获，一直捕获到你点击的目标元素，然后按照捕获阶段反向的顺序，依次执行各级父元素上的事件处理函数

整理下来就是：
2个阶段:
1. 捕获:由外向内，依次记录各级元素绑定的事件处理函数
捕获阶段只到目标元素截止
2. 冒泡: 按照捕获阶段反向的顺序，依次执行各级父元素上的事件处理函数

下面是代码的栗子

<!DOCTYPE HTML>
<html>
    <head>
        <title>取消与利用冒泡</title>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="css/3.css"/>
    </head>
    <body>
        <div id="keys">
            <button>1</button>
            <button>2</button>
            <button>3</button>
            <button>4</button><br>
            <button>C</button>
            <button>+</button>
            <button>-</button>
            <button>=</button>
        </div>
        <textarea id="sc" style="resize:none;width:200px; height:50px;" readonly></textarea>
    <script>
      //为id为keys的元素绑定单击事件为:
      keys.addEventListener("click",
        function(e){
     
     
          //获得目标元素，保存在target中
          var target=e.target;
          //如果target是button
          if(target.nodeName=="BUTTON"){
            //判断target的内容
            switch(target.innerHTML){
              case "C"://如果是C
                //清除id为sc的内容
                sc.value="";
                break;
              case "="://如果是=
                try{
    
    //错误处理
                  //将id为sc的内容，放入eval中，将结果再保存回id为sc的内容中
                  sc.value=eval(sc.value)
                }catch(err){
    
    //一旦出错
                  //将错误对象转为字符串，放入id为sc的内容中
                  sc.value=String(err);
                }
                break;
              default://其他
                //将target的内容追加到id为sc的内容中
                sc.value+=
                  target.innerHTML;
            }
          }
        }
      );
    </script>
    <a id="a1" href="#">click me</a>
    </body>
</html>

其实冒泡也可以取消。
取消冒泡: 执行完当前元素的事件处理函数后，阻止冒泡向上执行。
e.stopPropagation();

原生JS如何利用冒泡减少事件的触发，只代理给共有的父元素。

猜你喜欢