事件流-事件冒泡/捕获-普通事件与事件绑定的区别

事件流

从页面中接受事件的顺序

普通事件

<div onclick="clicked" id="dom">test</div>

dom.onclick = () => {}

非针对dom元素的事件，就是直接触发事件

• 不支持 DOM 事件流
• 事件捕获阶段目标元素阶段=>事件冒泡阶段
• 重复绑定时，后者会覆盖前者

事件绑定

<div onclick="clicked" id="dom">test</div>

dom.addEventListener('click', function(){}, true/false)

针对dom元素的事件，绑定在dom元素上，可以在一个元素上监听同一事件多次

• 重复绑定：所有的绑定将会依次触发
• 支持 DOM 事件流
• 第三个参数：useCapture：true：事件捕获阶段触发；false：默认，事件冒泡阶段触发

事件冒泡

<p>冒泡</p>
    <div class="wrapper" onclick="wrapper_click()">
        wrapper
        <div class="inner" onclick="inner_click()">
            inner
            <div class="in" onclick="in_click()">in</div>
        </div>
    </div>
    <div class="result_wrapper">冒泡结果：<span id="result"></span></div>

1. 点击 in时，所触发的事件
   
   我们可以看到，当事件绑定使用冒泡阶段触发时：
   会从in节点开始触发，从最里面的节点，逐级向上冒泡
   先打印：普通事件，在打印事件绑定事件，可以得出普通事件优先级高于事件绑定，

事件捕获

    <p>捕获</p>
    <div class="wrapper" onclick="wrapper_click_1()">
        wrapper1
        <div class="inner" onclick="inner_click_1()">
            inner1
            <div class="in" onclick="in_click_1()">in1</div>
        </div>
    </div>
    <div class="result_wrapper_1">捕获结果：<span id="result1"></span></div>

1. 点击 in时，所触发的事件
   
   当事件绑定使用捕获阶段触发时：
   打印结果是从最外围向内部触发，事件绑定：wrapper - inner - in
   在目标阶段，也就是in节点时：还是先触发了普通事件，在触发事件绑定事件

事件代理

页面事件绑定过多时，占用内存也会过多。
事件委托利用事件冒泡，只指定一个事件处理程序即可，就可以管理某一个类型的所有事件
当