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

来源：互联网发布：软件系统运维编辑：程序博客网时间：2024/06/02 02:28

相信很多人都知道事件代理这个方法,因为在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();

0 0