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 事件这一块就算告一段落，天天一小步，加油！