Javascript中事件的委托和模拟
内存和性能
事件类型是在太多了,直接跳到事件内存和型能这里
-
事件委托
由于事件冒泡的原理,可以只盯一个事件处理程序,用来管理一个类型的所有事件,比如
click
事件会一直冒泡到document
层次,也就是说如果可以的话,整个页面指定一个onclick
事件,而不必给所有元素分别添加事件处理程序利用事件委托,再上级或者尽量高的
DOM
层次中添加一个事件处理程序,用来管理下级DOM
的所有事件 -
移除事件处理程序
由于在销毁
DOM
元素的时候并不会移除事件监听程序的,所以会造成不一样的内存冗余养成良好的习惯,在移除
DOM
元素之前,先移除元素的监听事件还有就是页面有一个
onunload
事件,在页面被卸载前执行,但是需要考虑一些变量已经被释放的问题,还有就是如果有缓存页面,可能设计了这种方式就不会走缓存 -
模拟事件
DOM
中的模拟事件- 主要方法
document.createEvent
- 过程
- 使用
document.createEvent
创建时间,传入事件类型,返回一个包含初始化事件方法的对象 - 使用事件相关信息进行事件初始化
event.initMouseEvent(info)
,这里需要对应事件类型的初始化方法 - 使用
el.dispatchEvent(event)
在对应元素触发事件
- 使用
- 注意:在该元素触发事件,如果没有特殊处理,也会按照正常的事件冒泡进入事件流网上传递
- 主要方法
- 模拟自定义
DOM
事件- 方法跟上面类似,但是初始化事件的时候使用
initCustomEvent
进行初始化 - 初始化结束之后仍然需要
dispatch
到对应元素进行派发 initCustomEvent
有四个参数- 事件类型
- 是否冒泡
- 是否可取消
detail
- 方法跟上面类似,但是初始化事件的时候使用
IE
中的事件模拟- 逻辑跟
DOM
中的事件模拟差不多,只是方法名有一些不一样 - 创建事件
document.createEvent
- 初始化事件这里返回的对象就不包括初始化方法,直接往事件对象上添加属性
event.returnValue= false
- 在目标元素上调用触发事件函数
el.fireEvent(event)
- 逻辑跟
Javascript 事件这一块就算告一段落,每天一小步,加油!
分类:
javascript
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」