Vue中$event的用法

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

我的div呢

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

阅读量754

点赞数 3

分类专栏： vue 文章标签： Vue 事件处理 event.target DOM操作 currentTarget

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

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

我的div呢

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Vue中$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: {}, meth
复制链接

扫一扫

专栏目录