我们都知道通过在事件中添加$event可以对标签元素的dom获取或者修改标签指的属性等等,下面我们就以点击事件为例,其他鼠标事件雷同,看看怎么获取触发点击事件的真实dom吧首先 vue的点击事件 是用 @click 属性 在html中绑定的,
在点击的函数中 添加一个参数$event,如图:
<button @click = “clickEvent($event)”>点击</button>
methods: {
clickEvent(e) {
#获取你当前点击的元素
e.target
#获得你绑定事件的元素
e.currentTarget
#获得点击元素的前一个元素
e.currentTarget.previousElementSibling.innerHTML
#获得点击元素中的class属性
e.currentTarget.className
#获得点击元素的第一个子元素
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
}
},
你学会了吗?
常用的是这两个:e.target 就是对应你当前触发事件的大dom,
e.currentTarget 就是对应你当前大dom中触发事件的小dom