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

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