事件委托、事件冒泡、事件捕获

Tery_Huang
1,104 阅读2分钟

事件委托、事件冒泡、事件捕获

起因：

下午一个师弟在完成项目的时候，遇见一个问题，具体代码大概是这样的

<template>
  <div>
    <van-nav-bar class="bar" title="新用户引导页" />
    <div class="card" @click="getDataSet($event)" data-item="绑定的数值" style="width:60px;height:60px;background-color:red;border-radius:50%;overflow: hidden;">
             <img src="@/assets/logo.png" alt="" style="width:100%;height:100%;border:0"> 
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  data() {
    return {
    }
  },
  methods: {
    getDataSet: function(e) {
      console.log(e.target.dataset.item)
    }
  }
}
</script>


<style lang="scss" scoped>
</style>

<style lang="scss" scoped>
</style>

主要就是在div里面有一个img，整个div和里面的img的成形成一个头像，事件getDataSet绑定在div上面，也是这样的

[DNsc59.png

点击这个圆形的头像的时候，想要通过e.target.dataset.item获取到“绑定数值”，但是结果却是underfined,

[DNsWgx.png

后来发现将e.target.dataset.item改成e.currentTarget.dataset.item就可以获取到了

[DNsR81.png

后来发现这就是事件委托，自己之前也是只是了解结果事件委托、事件冒泡、事件捕获的概念，但是明显还是没有理解透，现在就乘着这个机会将这些知识点整理一遍。

浏览器的事件机制

事件冒泡与事件捕获

事件冒泡：事件开始的时候，由最具体的元素接受，然后逐级向上传播到较为不具体的节点

 

DNs6UJ.png

好比这个例子，当点击黄色，click事件首先在黄色格子上传播，然后是绿色格子，最后是红色格子。需要注意的是，这里的click事件的传播不管元素上面是否绑定了click事件，click事件的传播都是客观存在的，没有绑定click事件只是不触发绑定函数而已。

 

事件捕获：事件捕获是不太具体的节点应该更早接收到事件。

同样是上面的例子，当点击黄色格子的时候，首先触发的是红色格子上的事件，然后是绿色格子，然后才是黄色格子。同样的，这里的click事件的传播不管元素上面是否绑定了click事件，click事件的传播都是客观存在的，没有绑定click事件只是不触发绑定函数而已。

当前，多数浏览器使用的都是事件冒泡，所以建议大家也只是在有特殊需要时再使用事件捕获。

事件委托

事件委托：就是将元素响应事件的函数委托到另外的元素。

同样的，事件委托可以分为捕获阶段的事件委托和冒泡阶段的事件委托。这里主要讲的是冒泡阶段的事件委托。另外，在事件对象e中有两个元素，e.target和e.currentTarget，其中e.target表示当前受到点击的真实元素，e.currentTarget()表示的是被触发的这个函数所属的元素。

现在回到上面我遇见的问题，

[DNsc59.png·

<template>
  <div>
    <van-nav-bar class="bar" title="新用户引导页" />
    <div class="card" @click="getDataSet($event)" data-item="绑定的数值" style="width:60px;height:60px;background-color:red;border-radius:50%;overflow: hidden;">
             <img src="@/assets/logo.png" alt="" style="width:100%;height:100%;border:0"> 
    </div>
  </div>
</template>
<script type="text/javascript">
export default {
  data() {
    return {
    }
  },
  methods: {
    getDataSet: function(e) {
      console.log(e.target.dataset.item)
    }
  }
}
</script>


<style lang="scss" scoped>
</style>

<style lang="scss" scoped>
</style>

 

 

当我点击上面的圆圈之后，由事件冒泡可知，click事件首先是在img上面触发，然后传播到div上面，此时，e.currentTarget是表示的是被触发的这个函数所属的元素，即div，而e.target表示的e.target表示当前受到点击的真实元素，即img，所以，想通过e.target.dataset.item来获取"绑定的数值"是做不到的，最终的结果只能是underfined。这也可以看做是事件委托，即将img点击事件通过事件冒泡绑定到div上面去触发

 

感悟

身体是革命的本钱

好的身体能在日常状态中轻易调动自身的注意力、思维力，然后在日常生活中能抽出足够的能力去应对生活中的问题，还有精力去扩展自己更加长远的边界

开源思维

开源自己的生活模式、所学所想，将自己学的东西用博文的方式讲出来、讲自己今天干了啥，让别人给你反馈。

学会将身边的人当作老师，不断学习他人优点

学会模仿，模仿成功的学习路径会比自己去摸索快而且效果好，当然，前提学会独立思考

学习的套路：概念，例题，练习，讲给别人听。

大道至简

 

 

 

 

 

 

 

avatar
文章
阅读
粉丝