事件委托、默认事件、事件冒泡它通常用于为许多相似的元素添加相同的处理，不用单独为每个元素设置一个处理器，而在这些元素共同

事件委托

它通常用于为许多相似的元素添加相同的处理，不用单独为每个元素设置一个处理器，而在这些元素共同的祖先上（如：ducument）上添加一个处理器。 event.target，这是处理器里得到事件实际发生的位置并处理他。用一个无序列表举例

<ul>
 <li></li>
 <li></li>
 <li></li>
</ul>

需要满足的操作是当我点击每一个li时，它就隐藏，用事件委托就是在他们的祖先上添加事件监听，代码如下：

let ul=document.querySelector('ul')
function hide(event){
  event.target.style.visibility='hidden'
}
ul.addEventListener('click', hide, false);

阻止默认动作

只对有默认事件的元素有效，如<a>、<input type="submit"> 使用e.preventDefault()，IE则是使用e.returnValue = false可以取消默认事件。

//阻止浏览器的默认行为 
function stopDefault( e ) { 
    //阻止默认浏览器动作(W3C) 
     if ( e && e.preventDefault ){
         e.preventDefault(); 
    }
    //IE中阻止函数器默认动作的方式 
     else {
         window.event.returnValue = false; 
         return false; 
    }
}

阻止事件冒泡

什么是事件冒泡？就是对某个元素做事件操作时，该元素祖先元素也有相同事件操作，那么当执行这个元素事件时，会依次由自己向祖先执行这个事件，例子如下：

<div id='div' onclick='alert("div")'>
 <ul onclick='alert("ul")'>
     <li onclick='alert("li")'>test</li>
 </ul>
</div>

当点击test时，会依次弹出"li"、"ul"、"div"

使用e.stopPropagation()，IE则是使用e.cancelBubble = true起到阻止捕获和冒泡阶段中当前事件的进一步传播。

function stopBubble(e) { 
//如果提供了事件对象，则这是一个非IE浏览器 
    if ( e && e.stopPropagation ) 
        //因此它支持W3C的stopPropagation()方法 
        e.stopPropagation(); 
    else 
        //否则，我们需要使用IE的方式来取消事件冒泡 
        window.event.cancelBubble = true; 
    }