事件委托

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

  <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;