事件委托

事件委托就是利用冒泡的原理，把事件加到父元素或祖先元素上，触发执行效果！！！

  <ul class="parent-event">        <li data-event="add">添加事件</li>        <li data-event="delete">删除事件</li>        <li data-event="edit">编辑事件</li>    </ul><script>    document.getElementsByClassName('parent-event')[0].addEventListener('click', function(e) {        // e.target是被点击的元素!        if (e.target && e.target.nodeName == "LI") {            if(e.target.dataset.event==='add'){                //to do            }            else if(e.target.dataset.event==='delete'){                // to do            }else if(e.target.dataset.event==='edit'){                //to do            }        }    });</script>

<p> 所有主流浏览器都支持addEventListener()方法，除了 IE 8 及更早 IE 版本。</p><p>该实例演示了所有浏览器兼容的解决方案。</p><button id="myBtn">点我</button><script>var x = document.getElementById("myBtn");if (x.addEventListener) {    x.addEventListener("click", myFunction);} else if (x.attachEvent) {    x.attachEvent("onclick", myFunction);}function myFunction() {    alert("Hello World!");}</script>

addEventListener(type,fn,useCapture);
useCapture:
true表示该元素在事件的“捕获阶段”（由外往内传递时）响应事件；
false表示该元素在事件的“冒泡阶段”（由内向外传递时）响应时间。

1、event.stopPropagation(); // 阻止事件冒泡
2、return false;