Vue中$event的用法

最新推荐文章于 2024-05-27 21:58:40 发布

Poetry Code

最新推荐文章于 2024-05-27 21:58:40 发布

阅读量1.7w

点赞数 49

分类专栏： Vue 文章标签： vue.js javascript html5 es6 node.js

本文链接：https://blog.csdn.net/weixin_44253336/article/details/104188495

版权

Vue 专栏收录该内容

14 篇文章 4 订阅

订阅专栏

因为在Vue API文档里$event的用法找不到，所以我自己总结了一下。

通常的用法是用来获取当前元素的最新值。$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>

输出结果为： 123

当我们输出打印event这个参数的时候，我们可以看到很多属性。其中target就表示触发事件的元素。

在这里插入图片描述
在target中里面有许多属性，我们可以进行查找。比如当需要获取id的时候可以event.target.id,获取p标签的文本内容也可以为 event.target.innerText。

而event.currentTarget 是你绑定事件的元素,通常有以下用法。

    #获得点击元素的前一个元素
    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

Poetry Code

关注

49
点赞
踩
108

收藏

觉得还不错? 一键收藏
7
评论
Vue中$event的用法

因为在Vue API文档里$event的用法找不到，所以我自己总结了一下。通常的用法是用来获取当前元素的最新值。$event.target.value <body> <div id="app"> <input type="text" @click="abc($event)" value="123" /> </div>...
复制链接

扫一扫