内存和性能
事件类型是在太多了,直接跳到事件内存和型能这里
-
事件委托
由于事件冒泡的原理,可以只盯一个事件处理程序,用来管理一个类型的所有事件,比如
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)
- 逻辑跟