首页 > 编程语言 > 详细

Javascript中事件的委托和模拟

时间:2021-02-25 10:08:04      阅读:21      评论:0      收藏:0      [点我收藏+]

内存和性能

事件类型是在太多了,直接跳到事件内存和型能这里

  • 事件委托

    由于事件冒泡的原理,可以只盯一个事件处理程序,用来管理一个类型的所有事件,比如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中事件的委托和模拟

原文:https://www.cnblogs.com/zm-blogs/p/14444308.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!