函数的参数对象$event的使用和利用他找到事件对象

最新推荐文章于 2023-06-07 15:05:56 发布

笑道三千

最新推荐文章于 2023-06-07 15:05:56 发布

阅读量1.1k

点赞数 2

分类专栏： # 前端小案例

本文链接：https://blog.csdn.net/weixin_42349568/article/details/112550350

版权

前端小案例专栏收录该内容

49 篇文章 7 订阅

订阅专栏

一，常用方式：input中获取当前内容

$event.target.value

示例：

 <body>
    <div id="app">
      <input type="text" @click="abc($event)" value="123" />
    </div>
    <script>
      var vm = new Vue({
        el: "#app",
        data: {},
        methods: {
          abc(event) {
            console.log(event.target.value);
          }
        }
      });
    </script>
  </body>

二，$event.target获取触发事件的元素

当我们输出打印event这个参数的时候，我们可以看到很多属性。其中target就表示触发事件的元素。
在target中里面有许多属性，我们可以进行查找。比如当需要获取id的时候可以event.target.id,获取p标签的文本内容也可以为 event.target.innerText，还有常见的是获取事件元素的高度$event.target.offsetHeight

三，$event.currentTarget获取绑定事件的元素

触发事件的元素和绑定事件的元素，这是两个不同的概念，需要理解事件冒泡，事件目标和事件捕获，还要会明白事件委托的概念，可以看这篇文章：
https://blog.csdn.net/weixin_42349568/article/details/109019097
对于这里的应用，可以用这个例子来理解：
在这里插入图片描述
这里有三个二维码，是通过v-for循环出来的：

<!-- 二维码区域 -->
      <div class="qrCode">
        <div class="image" v-for="(item,index) in QR" :key="index">
            <span>{{item.title}}</span>
            <div class="maskbox">
              <img :src="item.src" alt="">
              <div class="mask">
                <button @click="getNewQR(index)">重新生成</button>
                <button @click="down($event)">下载二维码</button>
              </div>
            </div>
        </div>
      </div>

可以看到，我为了区分点击重新生成按钮，是在哪个二维码区域生成的，把index做为参数传入了。另一个下载二维码的按钮，我就是使用$event来处理：

//下载图片
      down(e) { // 保存二维码
        var oQrcode = e.currentTarget.parentElement.previousElementSibling     
        var url = oQrcode.src
        this.downloadIamge(url, '二维码')      //这是封装的下载图片的函数，可忽略
      },

我想要下载对应的二维码，就需要点击这个按钮时，获取到它对应的img元素，但是我现在事件是绑定在button上的，为了获取到这个img标签元素，就可以利用这个来获取。
有的人又说，可以通过设置$ref属性来获取对应的dom元素，但是这里是v-for循环出来的，三个二维码区域都是有这个一样的ref属性的。不能直接获取到我点击的哪个二维码图片。
也就是说，可以使用原生的parentElement这些东西，来获取和你事件绑定相关的元素节点。
常用的有：

    #获得点击元素的前一个元素
    e.currentTarget.previousElementSibling.innerHTML
    #获得点击元素的第一个子元素
    e.currentTarget.firstElementChild
    # 获得点击元素的下一个元素
    e.currentTarget.nextElementSibling
    # 获得点击元素中id为string的元素
    e.currentTarget.getElementById("string")
    # 获得点击元素的string属性
    e.currentTarget.getAttributeNode('string')
    # 获得点击元素的父级元素
    e.currentTarget.parentElement
    # 获得点击元素的前一个元素的第一个子元素的HTML值
    e.currentTarget.previousElementSibling.firstElementChild.innerHTML

笑道三千

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
函数的参数对象$event的使用和利用他找到事件对象

一，常用方式：input中获取当前内容$event.target.value示例： <body> <div id="app"> <input type="text" @click="abc($event)" value="123" /> </div> <script> var vm = new Vue({ el: "#app", data: {},
复制链接

扫一扫