JavaScript dom事件机制

事件绑定方式

• 直接绑定在DOM上

<div onclick="fun();">click</div>

-Elenen的onclick属性

document.getElementById("xxx").onclick = function(){
    // TODO     
};

• EventTarget.addEventListener()方法，将指定的监听器注册到 [EventTarget]

document.getElementById("xxx").addEventListener("click",function(e){
      // TODO
});

注意：
第二种会把第一种给覆盖掉，也就是说第一种和第二种是属于同一个方式，只是写法不同。

 <div id="testClick" onclick="console.log('第一种');"></div>
    <script>
        testClick.onclick = (e) => {
            console.log("第二种");
        };
    </script>

执行顺序

• a标签的href中的代码总是最后执行，最低的优先级。
• 无论是onclick还是addEventListener的执行顺序是按照 绑定的顺序在执行，就是先绑定的就先执行。
• 如果onclick事件被重复绑定，则以最后一次的绑定所在的顺序为准。
• 如果在DOM中直接使用onclick ，并且没有覆盖，则onclick的绑定是早于addEventListener的。
• 如果绑定多个addEventListener事件，在任意一个事件中stopPropagation()， 都会阻止事件的冒泡，但不会阻止后续事件的执行。