Vue中的$event

已于 2022-04-15 09:27:59 修改
阅读量725 收藏
点赞数
文章标签： html js 前端 vue.js
于 2021-12-01 18:19:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_52070860/article/details/121661414
版权
这篇博客探讨了Vue中事件监听和处理的方法，通过`@click`指令绑定`change`方法，展示了如何获取事件对象`event`以及其属性`srcElement`。同时，文章还提到了`event.target.innerText`用于获取点击元素的文本内容。内容涵盖了Vue中的事件处理和DOM操作基础。
摘要由CSDN通过智能技术生成 
<!-- dom -->
<div id='app'>
  <div @click='change($event)'>funck</div>
</div>


<script>
// 操作
new Vue({
  el:'#app',
  data: {
    
  },
  methods:{
      change(event){
          console.log(event);
          console.log(event.srcElement);
      }
  }
})
</script>

测试一下看看控制台输出的是什么

event是事件本身，里面包含了dom节点，event.srcElement指向了事件发生的dom

而event其实应该是默认会带的参数，也就是说不需要在调用函数的时候带上$event

<body>
  <div id='app'>
    <div class="try-div" @click="handleClick">33223233313</div>
  </div>
</body>
<script>

  // 操作
  new Vue({
    el: '#app',
    methods: {
      handleClick() {
        console.log(event.target.innerText)
      }
    }
  })
</script>

控制台输出

 

仙女叔叔
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue中$event的使用
看表该写博客了
05-23 1万+
$event分两种：第一种: 自定义组件（不如自定义父子组件或者elementui/iview组件）的$event 第二种： html原生的$event 先来看第一种吧--自定义组件的$event $event代表的就是 济南 青岛 这个选中的值，此时$event就代表传参 第二种 html原生的$event $event此时是获取的dom元素即 MouseEvent鼠标点击的这个按钮元素，(可理解为当前标签的属性) console....
Vue中的$event详解
热门推荐
violateer的博客
10-02 8万+
最近学习Vue的过程中，接触到了事件对象$event，记录一下我的理解。 场景1：获取原生DOM事件的事件对象 在DOM事件的回调函数中传入参数$event，可以获取到该事件的事件对象 <template> <button @click="getData($event)">按钮</button> </template> <script> export default { setup() { const getData =
Vue-$event(模板形参)
最新发布
weixin_49352307的博客
05-27 104
event:获取事件的形参。
vue中的$event
我的博客
06-04 108
普通元素中的$event 绑定函数无参数 - event对象作为默认作为参数传递 <template> <div class="hello" @click="e_Click"> </div> </template> <script> export default { methods: { e_Click(evt) { console.log(evt); } } </scr.
Vue事件（$event）
qq_36582776的博客
11-02 6850
1.Vue事件处理 <div id='div1'> <button v-on:click="showInfo1">提示信息1</button> <button @click="showInfo2($event,666)">提示信息2</button> //@是v-on:的简写形式 <div> <script> const vm=new Vue({ el:'#div1',
vue之$event的使用
牛先森家的博客
03-28 1333
最近学习Vue的过程中，接触到了事件对象$event，记录一下。 场景1：获取原生DOM事件的事件对象 在DOM事件的回调函数中传入参数$event，可以获取到该事件的事件对象 <template> <button @click="getData($event)">按钮</button> </template> <script> export default { setup() { const getData = (e)
vue之$event事件
我心坚持
04-30 3566
vue中的$event相当于dom中的event， vue中当函数没有参数时，默认自带 $event事件。 HTML： <i class="el-icon-delete" @click="delsku"></i> script： delsku(e){ console.log(e); }, 当在input中$event表示的是输入值，例如： <div v-for="(ite,inde) in item.list"> <el-input :value
Vue中$event的用法
wangatong的博客
12-17 134
<input type=“text” @click=“abc($event,1)” value=“123” /> <input type=“text” @click=“abc” value=“123” /> methods: { abc(event,n) { console.log(event.target.value,n); },abc(e) { console.log(e.target.value,n); } }
Vue中的$event用法
2301_77456141的博客
09-21 1024
此时点击子组件内按钮，就实现了向父组件传值，并且在父组件内应用的效果。通过该对象自带的一些属性，我们可以避免过多的冗余代码，细化代码。注册事件，将数据作为参数传入，在父组件中通过。在DOM事件的回调函数中传入参数。，可以获取到该事件的事件对象。
vue $event
小秋的博客
07-30 468
在原生事件中，$event是事件对象 在自定义事件中，$event是传递过来的数据 注意两点 1.不使用圆括号，event被自动当作实参传入 2.使用圆括号，必须显式的传入event对象，如果不传入可能最终找到的是全局的window .event 有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法： <tempalte> ...
Vue 方法中 $event 的用法
猎人在吃肉
09-16 5790
Vue 方法中 $event 的用法
vue-$event事件
t595981879的博客
08-22 1468
关于vue的$event
wylkl00的博客
05-20 257
vue在事件上绑定方法，以下两种方式实际上是一样的： <button v-on:click="say">Say hi</button> <button v-on:click="say()">Say what</button> 但是，如果要在say方法里面要获取原生dom的一些属性就需要获取$event（相当于原生js中o...
浅谈Vue中$event
qq_51194901的博客
01-21 585
关于Vue中$event 首先,需要明确的是Vue中的 event类似于原生js的事件对象e,event类似于原生js的事件对象e,event类似于原生js的事件对象e,event是指当前触发的是什么事件(鼠标事件，键盘事件等) Vue中关于函数的调用有两种,一种是直接写函数名的方式,一种是函数名()的形式,直接写函数名的形式默认携带这一个事件对象,函数名小括号的形式如果要携带参数,那么这个事件对象一定要写在所有参数名的最后. <input type="text" @blur='handle1($e
VUE事件参数$event
程序员劝退师的博客
04-14 6120
$event是事件对象的特殊变量，在一些场景能给我们实现复杂功能提供更多可用的参数 原生事件 在原生事件中表现和默认的事件对象相同 <template> <div> <input type="text" @input="inputHandler( hello , $event)" /> </div> </template> export default { methods: { inputH
vue中事件绑定$event
weixin_42187676的博客
11-04 1549
前端开发——Vue 事件参数$event
helloyangkl的博客
02-17 791
前端开发——Vue 事件参数$event
vue属性$event
09-16
在Vue中，$event＊＊＊事件的回调函数中传入参数$event，可以获取到该事件的事件对象。 在上述代码中，通过@click事件绑定了一个名为getData的方法，并在方法中传入了$event参数。当按钮被点击时，getData方法会被调用，并且$event参数会被自动传入，可以通过打印$event参数来查看该事件的事件对象。 在第二种引用中，$event是获取的dom元素，即MouseEvent鼠标点击的这个按钮元素。 而在第三种引用中，console.log($event.srcElement)打印出的是$event参数的srcElement属性，即事件对象的目标元素。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值