阻止冒泡和默认事件

JS事件流其中一种是冒泡事件，当一个元素被触发一个事件时，该目标元素的事件会优先被执行，然后向外传播到每个祖先元素，恰如水里的一个泡泡似的，从产生就一直往上浮，到在水平面时，它才消失。在这个过程中，如果你只希望事件发生在目标元素，而不想它传播到祖先元素上去，那么你需要在“泡泡”离开对象之前刺破它。
js冒泡和捕获是事件的两种行为，使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播。使用event.preventDefault()可以取消默认事件。

function stopBubble(e) { 
//一般都会提供，因为现在已经不是ie的时代了
if ( e && e.stopPropagation ) 
    e.stopPropagation(); }

阻止默认事件

function stopDefault(e) { 
//一般都会提供，因为现在已经不是ie的时代了
if ( e && e.preventDefault ) 
    e.preventDefault(); }

事件委托

有了事件冒泡，事件委托就有了基础，可以将事件的处理程序绑定给一个父级元素，当任何子节点触发了匹配的父级元素绑定的事件，即可触发父级节点的处理程序，这就是 事件委托 。eg中即时没有给每个 <li> 绑定事件，也会在点击任何一个 <li> 节点后跳转百度 。
eg

<ul onclick="location.herf'https://www.baidu.com/">
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

减少事件绑定，事件委托将很多子元素的事件绑定都集中到一个通用的父元素，使得动态创建和移除的元素更加方便，不需要考虑元素的事件绑定逻辑。假设需要对 <li> 标签进行增加，只管进行操作就行，不用增加元素的 “onclick” 事件。
减少事件监听使用的内存，这可能对那些经常重新加载的小页面效果不明显，但是对需要长时间运行的应用很重要。因为当元素被从 DOM 中移除之后很难追踪它对内存的使用，造成内存泄露，这是由元素的事件绑定造成的。有了事件委托，在移除子元素之后不用担心没有解除绑定事件。