Vue中$event的用法

最新推荐文章于 2025-05-09 16:10:29 发布

转载最新推荐文章于 2025-05-09 16:10:29 发布 · 820 阅读

3 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/weixin_44253336/article/details/104188495

vue 专栏收录该内容

3 篇文章

订阅专栏

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

我的div呢

关注关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

浅谈vue中$bus的使用和涉及到的问题

10-15

本文将详细介绍在Vue中如何使用$bus以及使用过程中可能遇到的问题。 ### $bus的创建和使用在Vue项目中，我们通常在`main.js`文件中注册$bus，首先创建一个Vue实例，然后将其赋值给Vue的原型，这样所有的Vue组件都...

Vue 方法中 $event 的用法

猎人在吃肉

09-16

6315

Vue 方法中 $event 的用法

参与评论您还未登录，请先登录后发表或查看评论

vue中$event的使用

qq_38577700的博客

08-05

1183

前言最近有看到别人用到event，不是很理解，然后百度了一下，做个初步的了解，先记录一下，后来有什么补充的在补充，大家有什么见解，欢迎留言。在父子组件通过自定义事件进行通信时，表示从子组件中传递出来的参数值 <button v-on:click="$emit('enlarge-text', 0.1)"> Enlarge text </button> <blog-post v-on:enlarge-text="postFontSize += $event" >&l

vue 组件之间事件触发($emit)与event Bus($on)的用法说明

10-15

主要介绍了vue 组件之间事件触发($emit)与event Bus($on)的用法说明，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

Vue中的$event用法

2301_77456141的博客

09-21

1416

此时点击子组件内按钮，就实现了向父组件传值，并且在父组件内应用的效果。通过该对象自带的一些属性，我们可以避免过多的冗余代码，细化代码。注册事件，将数据作为参数传入，在父组件中通过。在DOM事件的回调函数中传入参数。，可以获取到该事件的事件对象。

浅谈vue中$event理解和框架中在包含默认值外传参

10-14

首先，当我们在Vue组件的模板中使用事件绑定(@click、@change等)时，可以将$event变量作为参数传递给方法。例如，对于一个简单的点击事件： ```html ($event)">Click me ``` 在上述代码中，`handleClick`方法会...

vue中$refs, $emit, $on, $once, $off的使用详解

10-16

父组件通过在模板中使用 `@my-event="getMyEvent"` 监听这个事件，并调用 `getMyEvent` 方法来处理传递的数据。 3. **$on** `$on` 是 Vue 实例的方法，用于监听自定义事件。它允许我们在组件内或全局范围内注册一...

vue中 $event

08-26

在 Vue.js 中，`$event` 是一个特殊的变量，用于在事件处理函数中访问原生的 DOM 事件对象。当使用 `v-on` 指令绑定事件处理函数时，Vue 会自动将原生事件对象作为参数传递给指定的回调函数，开发者可以通过 `$event...

vue之$event的使用

牛先森家的博客

03-28

1514

最近学习Vue的过程中，接触到了事件对象$event，记录一下。场景1：获取原生DOM事件的事件对象在DOM事件的回调函数中传入参数$event，可以获取到该事件的事件对象 <template> <button @click="getData($event)">按钮</button> </template> <script> export default { setup() { const getData = (e)

[Vue]$event变量

m0_51955470的博客

11-21

999

event是 Vue.js 提供的一个特殊变量，指向事件对象，它代表了触发当前事件的原生 DOM 事件。在事件处理方法中，可以通过$event获取与该事件相关的所有详细信息，如鼠标坐标、键盘按键值、输入框的值等。如果只关心事件的某个特定值（如输入框的内容），可以直接传递该值，而不需要传递整个事件对象，这样能让代码更简洁清晰。希望这个解释能够帮助你更好地理解$event的作用！

vue中$event的两种用法

weixin_48079602的博客

04-11

2664

<body> <div id="app"> <div>{{msg}}</div> <input type="text" v-bind:value="msg" v-on:input='handle'> <!-- 在html部分，$event可以将当前对象传递到数据部分当中(其实不写这个$event也可以获取到当前对象，已在浏览器中证实，应该是通过window.event这

vue event方法的使用

qq_26642611的博客

12-24

629

1.监听 $on(event, callback)：监听实例的自定义事件 $once(event, callback)：同上，但只能触发一次 $watch(property,callback(new, old)): 监听属性的变化，拿到变化前后的值 // 第一种写法 watch: { text(new, old) { console.log(`${new}：${old}`); } ...

在vue中使用event事件

cmhahaha的博客

08-16

6633

在 jquery 中，我们传入到 bind 方法中的回调，只能是一个函数类型的变量或者一个匿名函数，传递的时候，还不能执行它（在后面加上一堆圆括号），否则就变成了取这一个函数的返回值作为事件回调。我们知道，相比于 jquery，vue 的事件绑定可以显得更加直观和便捷，我们只需要在模板上添加一个 v-on 指令（还可以简写为 @），即可完成类似于 $(‘xxx’).bind 的效果，少了一个利用选择器查询元素的操作。既没有传入实参，也没有接收的形参，这个 event 对象的来源，要么是上级作用链，要么。..

vue中组件使用$event

qq_43583236的博客

05-09

402

此外还有<input type="text" @click="abc($event)" value="123" />看代码时，看到了一个$event，基础不扎实不理解意思，搜索后明白是获取原生DOM事件对象。这里打印出来就是复选框的选中状态值： true/false。$event.target..value就是输入框的值。

Vue事件中如何使用 event 对象

有我更精彩的博客

02-08

1861

在Vue中，事件处理函数常常需要获取事件触发时的相关信息，比如鼠标位置、按键信息等。而要获取这些信息，就需要使用event对象。那么在Vue的事件中如何正确使用event对象呢？接下来就来详细介绍一下。

vue事件修饰符

m0_73971785的博客

01-11

360

在处理事件时调用event.preventDefault()或event.stopPropagation()是很常见的。尽管我们可以直接在方法内调用，但如果方法能更专注于数据逻辑而不用去处理DOM事件的细节会更好为了解决这一问题,Vue为v-on提供了事件修饰符，常用有以下几种：.stop.prevent.once.enter....

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

weixin_42349568的博客

01-13

1371

一，常用方式：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: {},

vue中$event使用方法

最新发布

10-14

在Vue中，$event是一个特殊的变量，用于在事件处理函数中访问原生的DOM事件对象，主要在模板中的内联事件处理中使用。以下是几种常见的使用方法： ### 基本事件处理在简单的按钮点击事件中，若要访问鼠标点击事件的原生属性，如 `clientX` 和 `clientY`（鼠标指针在浏览器可视区域中的水平和垂直坐标），可以使用 `$event`。示例代码如下： ```vue <template> <button @click="handleClick">点击我</button> </template> <script setup> const handleClick = (e) => { console.log('鼠标点击位置：', e.clientX, e.clientY); }; </script> ``` 这里的 `e` 就是 `$event` 传递过来的原生DOM事件对象，通过它可以访问事件的相关属性 [^1]。 ### 在DOM事件回调函数中获取事件对象在DOM事件的回调函数中传入参数 `$event`，能够获取到该事件的事件对象。示例如下： ```vue <template> <button @click="getData($event)">按钮</button> </template> <script setup> const getData = (e) => { console.log(e); }; </script> ``` 在这个例子里，`e` 代表了点击按钮时的原生DOM事件对象 [^2] [^3]。 ### 获取当前元素的节点相关信息通过 `$event` 可以获取当前点击元素的节点信息。示例如下： ```vue <template> <p @click="clickfun($event)">点击</p> </template> <script> export default { methods: { clickfun(e) { // e.target 是当前点击的元素 // e.currentTarget 是绑定事件的元素 // 获得点击元素的前一个元素 console.log(e.currentTarget.previousElementSibling); // 获得点击元素的第一个子元素 console.log(e.currentTarget.firstElementChild); // 获得点击元素的下一个元素 console.log(e.currentTarget.nextElementSibling); // 获得点击元素中id为string的元素 console.log(e.currentTarget.getElementById("string")); // 获得点击元素的string属性 console.log(e.currentTarget.getAttributeNode('string')); // 获得点击元素的父级元素 console.log(e.currentTarget.parentElement); // 获得点击元素的前一个元素的第一个子元素的HTML值 console.log(e.currentTarget.previousElementSibling.firstElementChild.innerHTML); } } } </script> ``` 在 `clickfun` 方法中，`e` 为 `$event` 传递的事件对象，通过 `e.currentTarget` 可以操作绑定事件的元素节点 [^4]。