vue中$event使用之获取当前元素及相关元素

更新时间：2023年10月20日 11:28:10 作者：酷酷的橙007

这篇文章主要介绍了vue中$event使用之获取当前元素及相关元素,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

$event使用之获取当前元素及相关元素

对于常见的事件，比如点击事件，第一个参数是事件本身，另外，在实际项目中，我们可能需要获取事件执行的元素或相关元素，在这里总结一下。

例如：点击事件

<button @click = “clickfun($event)”>点击</button>

通过事件获取元素：

methods: {
	clickfun(e) {
		// e.target 是你当前点击的元素
		// e.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
	}
}

vue关于$event的通俗理解

通过对$event的多次打印结果，可见：

$event是指当前触发的是什么事件（鼠标事件，键盘事件等）
$event.target则指的是事件触发的目标，即哪一个元素触发了事件，这将直接获取该dom元素

下面是例子：

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

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

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

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

且看下面这段代码，直接打印出target：

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

可见打印出来的值就是这个元素本身

我们可尝试获取其属性值：

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

所以我们可以利用$event进行一些函数传值之类的特殊操作

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue-router源码之history类的浅析
这篇文章主要介绍了vue-router源码之history类的浅析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-05-05
vue serve及其与vue-cli-service serve之间的关系解读
这篇文章主要介绍了vue serve及其与vue-cli-service serve之间的关系,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
在vue中使用image-webpack-loader实例
这篇文章主要介绍了在vue中使用image-webpack-loader实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
vue3组件式弹窗打开的3种方式小结
这篇文章主要给大家介绍了关于vue3组件式弹窗打开的3种方式,弹窗组件是常见的交互组件,它能够弹出一些提示信息、提醒用户进行操作等等,需要的朋友可以参考下
2023-07-07
详解vue高级特性
这篇文章主要介绍了vue高级特性的相关知识，文中介绍非常细致，帮助大家更好的参考和学习，感兴趣的朋友可以了解下
2020-06-06
vue如何获取图片流数据并展示
这篇文章主要介绍了vue如何获取图片流数据并展示问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-09-09
vue项目结构目录超详细介绍
这篇文章主要给大家介绍了关于vue项目结构目录超详细介绍的相关资料,Vue项目目录结构是指在开发Vue项目时,为了更好地组织和管理代码,将不同的文件按照一定的规则和层次结构进行分类和存放的方式,需要的朋友可以参考下
2023-12-12
移动端调试神器vConsole使用详解
vConsole 是框架无关的，可以在 Vue、React 或其他任何框架中使用，今天通过本文给大家介绍移动端调试神器vConsole使用，感兴趣的朋友一起看看吧
2022-04-04
vue video和vue-video-player实现视频铺满教程
这篇文章主要介绍了vue video和vue-video-player实现视频铺满教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-10-10
vue 父子组件共用mixins的注意点
这篇文章主要介绍了vue 父子组件共用mixins的注意点，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04