vue中$event使用之获取当前元素及相关元素
作者：酷酷的橙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进行一些函数传值之类的特殊操作
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。