一个例子让你明白什么是事件代理(事件委托)__前端__Vue.js
发布于 3 年前 作者 banyungong 1348 次浏览 来自 分享
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

theme: channing-cyan

什么是事件委托?

当一个循环达到几十次或者上百次,并且在其本身绑定事件,渲染的时候,给每个dom绑定事件,这样操作是很耗费性能的,这时我们就应该利用冒泡的机制和事件流的特性去把他的事件绑定在父亲本身,这样我们只需要绑定一个事件就能操作所有元素拉。

举个通俗点的例子蛤

某个班级100个人,每个人刚好都有快递要拿,如果每个人都出去拿自己的快递的话,数量是不是非常大?这时班长要去拿快递啦,其他同学就可以委托班长给班长去拿,然后再由班长根据快递上面的名字分发到每个人同学手上,这就是事件委托啦。

好了,接下来让代码去描述上面的代码吧(技术栈为Vue哦)

html代码内容

image.png

p 标签上的data-obj 是我自定义的属性,可以根据dom对象上的dataset拿到数据,格式:data-自定义名字。

看ul标签,点击事件我只绑定在父元素身上哦。

刚开始的时候界面长这样

image.png

最最最最重要的事件逻辑的来啦

先获取当前的事件对象,然后判断当前点击的节点是否是ul

image.png 我随便点一个

image.png

由此可见事件委托是成功的,我们来看看点击时的事件对象结构

image.png

可以很清楚的看清 我们绑定的值和当前点击的时哪个元素。

我写项目的时候也很经常使用事件委托去处理多个相同的事件,这也是优化性能的一种方式(少了遍历所有 li 节点的操作,性能上肯定更加优化)

例子源码

<template>
  <div id="app">
  
    <ul @click="giveDelivery">
      <li v-for="c in 10" :key="c" :data-obj="c"> 同学 {{ c }}</li>
    </ul>

    <p>
      同学 {{ val }} 的快递
    </p>
    
  </div>
</template>

<script>

export default {
  name: 'App',

  data() {
    return {
      val: ''
    }
  },

  methods: {
    giveDelivery(event) {
      const e = event || window.event // 获取点击的事件对象
      console.log(e)
      if(e.target.nodeName.toLowerCase() === 'li') {
        this.val = e.target.dataset.obj // 拿到绑定 data-obj 的值
      }
    }
  }
}
</script>


<style>

ul {
  display: flex;
}

li {
  width: 80px;
  line-height: 30px;
  margin-right: 5px;

  cursor: pointer;
  background-color: red;
  
  color: #fff;
  list-style: none;
  text-align: center;
}

p {
  width: 500px;
  line-height: 300px;

  color: #fff;
  font-size: 24px;
  font-weight: bold;
  text-align: center;

  background-color: #000;
}
</style>

如果觉得这篇文章对你有帮助的话,麻烦动动小指头帮我点个赞赞哦,谢谢各位客官。

版权声明:著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 作者: 大码猴 原文链接:https://juejin.im/post/6967168165277073445

回到顶部