事件冒泡
IE的事件流叫做事件冒泡。顾名思义当事件发生后，事件就开始从里向外传播，查看下方代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="myDiv"></div>
</body>
</html>
如果点击页面中的 <div> 元素，那么这个 chick 事件就会按照如下顺序传播：
click 事件 在 直系DOM 树的每一级节点都会发生（自下而上），直到 document 对象。
事件委托
又称事件代理。对“事件处理程序过多”问题的解决方案就是事件委托。事件委托利用了事件冒泡，只指定一个父类事件处理程序，就可以管理某一类型的所有子类元素事件。
<ul id="myList">
<li id="goSth"></li>
<li id="doSth"></li>
<li id="sayHi"></li>
</ul>
三个<li> 被单击，按照传统方式，会给他们单独添加事件：
document.getElementById('sayHi').onClick(function(){...})
点击事件不多的情况下还好，若是所有元素都采用这样的方式，结果就会有数不清的代码用于添加事件处理。就好比一万个人全挤到公司前台去拿快递，那场面，蔚为壮观啊！但是把快递放到前台，前台接收，然后分批次派送，就会舒服很多：
document.getElementById('myList').onClick(function(ev){
var e = ev || window.event;
var target = e.target;
switch (target.id) {
case 'goSth':
...
break;
case 'doSth':
...
break;
...
}
})
上面是用事件委托的方式，子元素是带有事件效果的，我们可以发现，当用事件委托的时候，根本就不需要去遍历元素的子节点，只需要给父级元素添加事件就好了，子元素点击，会通过以事件冒泡的方式激活父元素已添加的相同事件，减少了很多 js 对于 dom 的事件操作，占用更少的内存，这大概是事件委托的精髓所在。
所有用到按钮的事件（多数鼠标和键盘事件）都适合采用事件委托。
自己是一个6年的前端工程师,希望本文对你有帮助！
这里推荐一下我的前端学习交流扣qun：731771211 ，里面都是学习前端的，如果你想制作酷炫的网页，想学习编程。自己整理了一份2019最全面前端学习资料，从最基础的HTML+CSS+JS【炫酷特效，游戏，插件封装，设计模式】到移动端HTML5的项目实战的学习资料都有整理，送给每一位前端小伙伴，每天分享技术
点击：加入
网友评论