vue中关于$event的通俗理解

通过对$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进行一些函数传值之类的特殊操作。目前笔者只发现了这些作用,多有遗漏,欢迎补充。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,581评论 1 11
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,272评论 0 21
  • JavaScript 与 HTML 之间的交互是通过事件实现的。事件,就是文档或浏览器窗口中发生的一些特定的交互瞬...
    LemonnYan阅读 703评论 0 4
  • 本节介绍各种常见的浏览器事件。 鼠标事件 鼠标事件指与鼠标相关的事件,主要有以下一些。 click 事件,dblc...
    许先生__阅读 2,541评论 0 4
  • 1### Menu 第13章 事 件 13.2 事件处理程序 13.2.1 HTML事件处理程序 13.2.2 D...
    ft207741阅读 407评论 0 0