事件委托（事件代理）

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中事件委托：

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

<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 来传入