JavaScript dom事件机制

事件绑定方式

  • 直接绑定在DOM
<div onclick="fun();">click</div>

-Elenenonclick属性

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(), 都会阻止事件的冒泡,但不会阻止后续事件的执行。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,526评论 1 11
  • dom事件 1.什么是事件?事件就是一件事情或者行为(对于元素来说他的很多事件都是天生自带)只要我们去操作这个元素...
    田成力阅读 635评论 0 0
  • 以下文章为转载,对理解JavaScript中的事件处理机制很有帮助,浅显易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy阅读 3,066评论 1 10
  • 事件是一种异步编程的实现方式,本质上是程序各个组成部分之间的通信。DOM支持大量的事件,本节介绍DOM的事件编程。...
    周花花啊阅读 597评论 0 3
  • 目录 概述 EventTarget接口EventTarget.addEventListener()EventTar...
    许骁Charles阅读 561评论 4 0