vue 在 v-for 时给每项元素绑定事件需要用事件代理吗？为什么？

2024-10-21 09:31:28

vue本身不做事件代理（react将所有事件都委托到document上，然后进行派发）

普通html元素和在组件上挂了.native修饰符的事件。最终EventTarget.addEventListener()挂载事件
组件上的，vue组件实例上的自定义事件（不包括.native）会调用原型上的$on,$emit（包括一些其他api $off,$once等等）

vue自身没有做事件代理，如果需要，则直接代理到父节点

<ul @click="meths">

      <li v-for="(item,key) in 10" :key="key" :data-index="key">{{item}}</li>

 </ul>

meths(e) {

      if (e.target.nodeName.toLowerCase() === 'li') {

        console.log(e.target.innerHTML)

        console.log(e.target.dataset)

      }

}

事件代理作用主要是 2 个

将事件处理程序代理到父节点，减少内存占用率
动态生成子节点时能自动绑定事件处理程序到父节点

最新文章

热门文章