事件委托
什么是事件委托：
通俗的讲，事件就是onclick，onmouseover，onmouseout，等就是事件，委托呢，就是让别人来做，这个事件本来是加在某些元素上的。
原理: 利用冒泡的原理，把事件加到父级上，触发执行效果。
例如：要点击删除 ul 下的 li ,一般是都要给每个小li 绑定点击事件，然后再进行判断是否删除。代码如下：
<body>
<input type="text" />
<ul>
<li>苹果</li>
<li>香蕉</li>
<li>鸭梨</li>
</ul>
<script> let ulList =document.querySelector("ul" )
let liList =document.querySelectorAll("li" ) for (let i=0;i<liList.length;i++ ){
liList[i].onclick = function (){
ulList.removeChild( this )
}
} </script> 利用 事件委托删除：（js部分）
let ul = document.querySelector('ul' )
ul.addEventListener( 'click', function (e) {
ul.removeChild(e.target)
}) 则只需 给小 li 的亲父级绑定一个点击事件，利用冒泡，来进行删除。
DOM事件流（event flow ） 存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。
事件捕获（event capturing）：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。
事件冒泡（dubbed bubbling）：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。就像水里的泡泡一样，从最里面一直冒到最外面。
无论是事件捕获还是事件冒泡，它们都有一个共同的行为，就是事件传播，就很像多诺米骨牌一样。只要就一个倒了，那么后面就会产生连锁反应。
阻止事件冒泡：
①e.stopPropagation()
在点击事件中 添加 e.stopPropagation() 。 即可阻止冒泡
主要代码如下：
<style> .big{
width: 500px;
height: 500px;
background - color: red;
}
.center{
width: 300px;
height: 300px;
background - color: green;
}
.small{
width: 150px;
height: 150px;
background - color: blueviolet;
} </style> </head> <body> <div class="big"> <div class="center"> <div class="small"></div> </div> </div> <script> let big =document.querySelector('.big' )
let center =document.querySelector('.center' )
let small =document.querySelector('.small' )
big.addEventListener( 'click', function (e){
console.log(e.target);
console.log( this );
console.log( "我是big" );
})
center.addEventListener( 'click', function (e){
console.log( "我是center" );
e.stopPropagation()
})
small.addEventListener( 'click', function (e){
console.log( "我是small" );
}) </script> </body>
②window.event.cancelBubble = true （谷歌，IE8兼容，火狐不支持）
其它代码与①一致，只展示修改部分：
center.addEventListener('click', function (e){
console.log( "我是center" );
window.event.cancelBubble = true // （谷歌，IE8兼容，火狐不支持） }) ③合并取消：return false
在javascript的return false只会阻止默认行为，而是用jQuery的话则既阻止默认行为又防止对象冒泡。
如有错误，欢迎指正！！！