事件委托!!+ fragment

127 阅读1分钟

事件委托

  1. 是什么: 在一个嵌套关系的dom结构中,需要给每个子元素都注册多个重复的事件,我们将子元素的事件处理函数委托给父元素
  2. 为什么: 因为这样就不用给每个子元素都注册事件,而且在之后增加子元素时不用重新再注册事件,删除子元素的时候也不会有多余的未被删除的事件占据内存
  3. 如何实现: 通过父元素事件对象的 target 属性(事件末梢元素) 就可以拿到想要执行事件处理函数的子元素,在对该子元素进行操作
  4. 优点: 节省代码书写量, 以后增删子元素,维护起来更方便

案例 功能:ul下的每个li都能切换.active样式,并且都能打印自己的innerText

  • 这里用了事件委托,这样无论是创建多少个li,li都有点击切换样式.active和打印自己的innerText的功能