美文网首页程序员
vue中关于$event的通俗理解

vue中关于$event的通俗理解

作者: 水果拉菲克 | 来源:发表于2019-08-03 21:36 被阅读0次

通过对$event的多次打印结果,可见:

$event是指当前触发的是什么事件(鼠标事件,键盘事件等)

$event.target则指的是事件触发的目标,即哪一个元素触发了事件,这将直接获取该dom元素

下面是例子:


<button @click="console.log($event)" name="哈哈">单击</button>

由于鼠标点击,所以触发鼠标单击事件,打印出来的是事件,如下图:

image

展开后确实有target属性,且target说明了这是button:

image

实际上展开target就可以看到更具体的信息,这里不做演示,其实也就是这个button的各种属性等等,直接就是这dom元素。

且看下面这段代码,直接打印出target:

<button @click="console.log($event.target)" name="哈哈">单击</button>
image

可见打印出来的值就是这个元素本身
我们可尝试获取其属性值:

<button @click="console.log($event.target.name)" name="哈哈">单击</button>
image

所以我们可以利用$event进行一些函数传值之类的特殊操作。目前笔者只发现了这些作用,多有遗漏,欢迎补充。

相关文章

  • vue中关于$event的通俗理解

    通过对$event的多次打印结果,可见: $event是指当前触发的是什么事件(鼠标事件,键盘事件等) $even...

  • 关于vue中@click.native(demo)

    关于vue中@click.native .native - listen for a native event o...

  • vue中的$event

    问题来源 组件库封装的Icon组件,需要使用修饰符.stop阻止冒泡,但使用时报错,$event为undefine...

  • vue-event-calendar

    vue-event-calendar vue-event-calendar是一款简单小巧的事件日历组件,针对Vue...

  • vue中默认传递event方法

    1.在vue中普通方法中默认带有event DOM事件

  • vue中$emit与$on

    var Event = new Vue();相当于又new了一个vue实例,Event中含有vue的全部方法; E...

  • vue中$emit与$on

    var Event = new Vue();相当于又new了一个vue实例,Event中含有vue的全部方法; E...

  • vue文档集合

    Vue2使用笔记3--父子组件的通信Vue 2.0开发实践(组件间通讯)Event Bus 在Vue中的使用vue...

  • Vue-cnode社区-阻止向上冒泡

    在vue中传入默认原生event对象用$event stop阻止单击向上冒泡 self用法:self只是作用在元素...

  • dom更新监听浅析

    通过angular/vue/react知识的理解, 结合着浏览器多线程, event loop, 让我们来一起聊聊...

网友评论

    本文标题:vue中关于$event的通俗理解

    本文链接:https://www.haomeiwen.com/subject/zsusdctx.html