JS事件模型(事件流/事件模型/事件委托/事件监听)
1|0事件
javascript
中的事件,可以理解就是在HTML
文档或者浏览器中发生的一种交互操作,使得网页具备互动性, 常见的有加载事件、鼠标事件、自定义事件等
2|0事件流
由于DOM
是一个树结构,如果在父子节点绑定事件时候,当触发子节点的时候,就存在一个顺序问题,这就涉及到了事件流的概念
事件流都会经历三个阶段:
- 事件捕获阶段(capture phase)(事件委托)
- 处于目标阶段(target phase)
- 事件冒泡阶段(bubbling phase)
使用stopPropagation()
来阻止冒泡事件
addEventListener()
可以控制事件顺序的优点,既在addEventListener()
里添加一个参数false
(执行冒泡)或者true
(执行捕获),addEventListener()
默认为false
3|0事件模型
3|1原始事件模型
(1)在html中直接绑定
(2)通过JS代码绑定
特性
绑定速度快
DOM0
级事件具有很好的跨浏览器优势,会以最快的速度绑定,但由于绑定速度太快,可能页面还未完全加载出来,以至于事件可能无法正常运行
-
只支持冒泡,不支持捕获
-
同一个类型的事件只能绑定一次
3|2标准事件模型
在该事件模型中,一次事件共有三个过程:捕获/处理/冒泡
事件绑定监听函数的方式如下:
addEventListener(eventType, handler, useCapture)
事件移除监听函数的方式如下:
removeEventListener(eventType, handler,
useCapture)
参数如下:
eventType
指定事件类型(不要加on)handler
是事件处理函数useCapture
是一个boolean
用于指定是否在捕获阶段进行处理,一般设置为false
与IE浏览器保持一致
特性
- 可以在一个
DOM
元素上绑定多个事件处理器,各自并不会冲突
- 执行时机
当第三个参数(useCapture
)设置为true
就在捕获过程中执行,反之在冒泡过程中执行处理函数
4|0IE事件模型
IE事件模型共有两个过程:
- 事件处理阶段:事件到达目标元素, 触发目标元素的监听函数。
- 事件冒泡阶段:事件从目标元素冒泡到
document
, 依次检查经过的节点是否绑定了事件监听函数,如果有则执行
事件绑定监听函数的方式如下:
事件移除监听函数的方式如下:
举个例子:
5|0 事件委托
- 给每个li绑定事件:
- 事件委托进行绑定
6|0 事件监听 addEventListener()
-
element.addEventListener(event, function, useCapture)中的第三个参数可以控制指定事件是否在捕获或冒泡阶段执行。true - 事件句柄在捕获阶段执行。false- 默认- 事件句柄在冒泡阶段执行。
-
addEventListener() 可以给同一个元素绑定多个事件,不会发生覆盖的情况。如果给同一个元素绑定多个事件,那么采用先绑定先执行的规则。
-
addEventListener() 在绑定事件的时候,事件名称之前不需带 on 。
-
注意该方法的兼容性,如果要兼容 IE6-8 ,不能使用该方法,可以采用以下方法。
-
可以使用 removeEventListener() 来移除之前绑定过的事件。
__EOF__

本文链接:https://www.cnblogs.com/jingxin01/p/16404499.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战