标签：初始化 元素 委托 DOM 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 事件这一块就算告一段落，每天一小步，加油！

标签：初始化,元素,委托,DOM,Javascript,事件,移除,模拟,冒泡
来源： https://www.cnblogs.com/zm-blogs/p/14444308.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。