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

本文主要是介绍原生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是buttonif(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>