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中的事件委托与事件模拟)