HTML+JS事件捕获

事件：
JavaScript 和 HTML的交互是通过事件实现的，事件发生在传播过程中。

• DOM中事件传播有2种方式：
  • 捕获模式(capturing)，捕获模式又称为“滴流模式”(trickling)，就是“从上向下”，
  • 冒泡模式(bubbling)，“从下向上”（默认的时间传播方式）
    这里的从上而下是以DOM树为依据，父节点在上，子节点在下。

事件捕获	事件冒泡
事件捕获	事件冒泡

• 使用addEventListener(type, listener, useCapture)来注册事件的时候，第三个参数默认为false，代表事件捕获方式为冒泡

• 使用.stopPropagation()可以阻断事件的传播，当为事件捕获时，阻断事件向下传播，当为事件冒泡时，阻断事件向上传播

• .preventDefault()是用来阻止DOM元素默认的事件的，比如a标签的跳转动作，表单button的提交动作，与事件传播关系不大

• return false;是JQ的语法，相当于.stopPropagation()+.preventDefault()，原生语法中无效

如下例：

1. 使用的是事件捕获模式，在最上层的outerMost使用了stopPropagation，则点击任何一个元素，都只会触发outerMost的事件
2. 使用的是事件捕获模式，所以当点击innerMost的时候，DOM事件并未传递到innerMost，所以e.preventDefault()不起作用，a标签仍然会导致页面跳转

    outerMost
    

        Middle
        click
    

进阶：事件流

事件流

• 第一阶段：从最顶层window对象传导到目标节点，称为“捕获阶段”(capture phase)。
• 第二阶段：在目标节点上触发，称为“目标阶段”(target phase)。
• 第三阶段：从目标节点传导回最顶层window对象，称为“冒泡阶段”(bubbling phase)