事件走向及默认行为，默认行为的阻止

事件流 (事件的走向)：先捕获（由外向内）（到事件源）再冒泡（由内向外触发）

事件触发的三个阶段：

window 往事件触发处传播，遇到注册的捕获事件会触发
传播到事件触发处时触发注册的事件
从事件触发处往 window 传播，遇到注册的冒泡事件会触发
事件触发一般来说会按照上面的顺序进行，但是也有特例，如果给一个 body 中的子节点同时注册冒泡和捕获事件，事件触发会按照注册的顺序执行。

// 以下会先打印冒泡然后是捕获
node.addEventListener(
  'click',
  event => {
    console.log('冒泡')
  },
  false
)
node.addEventListener(
  'click',
  event => {
    console.log('捕获 ')
  },
  true
)

事件的冒泡（事件同名，事件源呈包含关系）
事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。

一般来说，如果我们只希望事件只触发在目标上，这时候可以使用 stopPropagation 来阻止事件的进一步传播。通常我们认为 stopPropagation是用来阻止事件冒泡的，其实该函数也可以阻止捕获事件。stopImmediatePropagation 同样也能实现阻止事件，但是还能阻止该事件目标执行别的注册事件。

node.addEventListener(
  'click',
  event => {
    event.stopImmediatePropagation()
    console.log('冒泡')
  },
  false
)
// 点击 node 只会执行上面的函数，该函数不会执行
node.addEventListener(
  'click',
  event => {
    console.log('捕获 ')
  },
  true
)

阻止事件冒泡（兼容性写法）

inner.onclick=funnnction(e){
      var evt=e || event;
      console.log(“inner”);
       if(evt.stopPropagation){
            evt.stopPropagation(); //ie低版本不支持 
        }else{
                  evt.cancelBubble=true ;
        }
}

注册事件
通常我们使用 addEventListener 注册事件，该函数的第三个参数可以是布尔值，也可以是对象。对于布尔值 useCapture 参数来说，该参数默认值为 false（不支持捕获），useCapture 决定了注册的事件是捕获事件还是冒泡事件。对于对象参数来说，可以使用以下几个属性

capture：布尔值，和 useCapture 作用一样
once：布尔值，值为 true 表示该回调只会调用一次，调用后会移除监听
passive：布尔值，表示永远不会调用 preventDefault

事件代理（事件委托）
如果一个节点中的子节点是动态生成的，那么子节点需要注册事件的话应该注册在父节点上

<ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<script>
    let ul = document.querySelector('#ul')
    ul.addEventListener('click', (event) => {
        console.log(event.target);
    })
</script>

事件代理的方式相较于直接给目标注册事件来说，有以下优点：

节省内存
不需要给子节点注销事件

浏览器的默认行为
JavaScript事件本身所具有的属性，例如a标签的跳转，Submit按钮的提交，右键菜单，文本框的输入等。
阻止默认行为的方式
event.preventDefault(); 存在兼容性问题
event.returnValue = false; 存在兼容性问题
return false;阻止默认行为，并结束函数执行一般写在函数的最后边不存在兼容性问题
兼容性写法

if(event.preventDefault){
  event.preventDefault();
 } else{
  event.returnValue = false;
 }

a标签的特定阻止：<a href=“javascript:;”></a>
<a href=“javascript:void(0);”></ a>

事件走向及默认行为，默认行为的阻止

推荐阅读更多精彩内容