JS事件委托

事件委托

将事件委托给父级执行，这样在子级比较多的时候就可以不必为每一个自己增加相同功能的事件

<template >
  <div class="container">
    <ul @click="zjqFun">
      <li v-for="item in obj" :key="item">{
   {
   item}}</li>
    </ul>
  </div>
</template>
<script>
export default {
   
  setup() {
   
    let obj = [
      "我是第1行",
      "我是第2行",
      "我是第3行",
      "我是第4行",
      "我是第5行",
      "我是第6行"
    ];
    const zjqFun = e => {
   
      if (e.target.nodeName == "LI") {
   
        e.target.innerHTML = 111;
      }
    };
    return {
    obj, zjqFun };
  }
};
</script>
<style  scoped>
</style>
</script>
<style  scoped>
</style>

通过操作dom改变了每一项li的innerHTML;

通过vue的循环给一项li动态的加事件：

<template >
  <div class="container">
    <ul>
      <li v-for="(item,i) in objArr" :key="item" @click="zjqFun(i)">{
   {
   item}}</li>
    </ul>
  </div>
</template>
<script>
import {
    ref } from "vue";
export default {
   
  setup() {
   
    let obj = [
      "我是第1行",
      "我是第2行",
      "我是第3行",
      "我是第4行",
      "我是第5行",
      "我是第6行"
    ];
    let objArr = ref(obj);
    const zjqFun = i => {
   
      objArr.value[i]=111
    };
    return {
    objArr, zjqFun };
  }
};
</script>
<style  scoped>
</style>