事件委托

最新推荐文章于 2024-06-10 17:00:16 发布

壹零捌壹

最新推荐文章于 2024-06-10 17:00:16 发布

阅读量329

点赞数

分类专栏： js 文章标签： js

本文链接：https://blog.csdn.net/kamianlaidaa/article/details/117405479

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

事件委托是一种优化JavaScript性能的技巧，它利用事件冒泡原理，将事件绑定在父元素上，而不是每个子元素。这样可以减少DOM操作，提高页面性能。在Vue中，事件委托同样适用，例如在循环中动态绑定数据时，可以给父元素添加一个统一的点击事件，通过事件对象的`target`属性获取触发事件的元素，从而实现对特定子元素的操作。这种方式对于新增元素依然有效，避免了为每个新元素单独绑定事件的需要。

摘要由CSDN通过智能技术生成

1.什么是事件委托呢？

如果子元素身上绑定了大量相同的事件，我们尽量采用事件委托的方式，把所有子元素的自己的事件委托给父级

2.事件委托的原理？

事件冒泡

3.为什么使用事件委托？

传统的for循环绑定事件，会增加dom操作(事件)，影响页面性能，采用事件委托就是把所有的事件基于一个元素上

4.事件委托和传统事件绑定的优势？

传统的事件绑定对新增元素不起作用，而事件委托起作用；传统的时间绑定，有多少元素js就需要绑定多少事件，而事件委托只需要一个事件

js中事件委托：

<ul id="list">
 <li id="item1" >item1</li>
 <li id="item2" >item2</li>
 <li id="item3" >item3</li>
</ul>
 
<script>
var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");
var item3 = document.getElementById("item3");
 
document.addEventListener("click",function(event){
 var target = event.target;
 if(target == item1){
 alert("hello item1");
 }else if(target == item2){
 alert("hello item2");
 }else if(target == item3){
 alert("hello item3");
 }
})
</script>

vue中事件委托：

我们在每一个循环的标签身上动态绑定一个自定义属性。
给统一的父元素绑定事件。
在事件中可以通过事件对象来获取自定义属性的值
代码

<template>
  <div class="home">
      <ul @click="click">
        <li v-for="(item,index) in 100" :key="item" v-bind:data-index="index">{{item}}</li>
        <-- data-自定义属性名="值" -->
      </ul>
  </div>
</template>
 
<script>
 
 
export default {
  methods:{
    click(e){
      console.log(e.target.dataset.index);
      // 获取是通过  e.target.dataset.自定义属性名
      
    }
  },
}
</script>

注意：如果事件需要传参且还需要用到事件对象，那么我们传入的第一个实参就是事件对象。事件对象使用 $event 来传入