DOM Event

DOM Event

事件流

事件流分为三个阶段:事件捕捉,目标触发,事件冒泡

事件捕捉

注册事件类型发生后,从html到目标节点的父节点,会触发每一个节点注册的捕捉事件。事件捕捉阶段不包括目标节点,即目标节点的事件触发并不发生在这个阶段。

目标触发

当事件捕捉阶段结束,就到了目标阶段。这个时候再目标节点上触发事件的顺序,是不分事件捕捉和事件冒泡,而是根据注册顺序依次执行。

事件冒泡

目标阶段触发完后,到了冒泡阶段。从目标节点的父节点到html节点,依次触发该节点注册的冒泡事件。

event对象

需要关注的参数和方法不多。

event方法

preventDefault:阻止节点的浏览器行为;a标签不会跳转,button不会触发点击特效。

stopPropagation:阻止事件流的进一步发生。

event属性

target: 目标节点。

currentTarget:注册当前触发事件的节点

addEventListener

target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);

我们常用的是第二种,通过Boolean来开启事件捕捉。
我们主要看看第一种使用方法,拥有options的配置项。

options

  1. capture:是否事件捕捉
  2. once:事件最多触发一次
  3. passive:声明触发事件不会使用prevenDefault
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 8,899评论 1 11
  • 该文章会讲述DOM规范里的事件流动的机制。你需要对浏览器事件相关的知识有最基本的了解。 考虑这么个例子: 哪怕一个...
    butterandfly阅读 6,653评论 0 1
  • 打个小广告:如果你想获取更多前端干货、鹅厂工程师的前端面试指南,欢迎关注我的个人微信公众号:前端夜谈 DOM 事件...
    ssthouse阅读 4,136评论 1 2
  • 以下文章为转载,对理解JavaScript中的事件处理机制很有帮助,浅显易懂,特分享于此。 什么是事件? 事件(E...
    jxyjxy阅读 8,203评论 1 10
  • 本文很大程度上参考、整理自《DOM Enlightenment》及网络 可以到MDN的Event referenc...
    butterandfly阅读 1,756评论 0 0

友情链接更多精彩内容