vue事件获取事件对象event.currenttarget
在学习vue的时候,在进行tab栏切换的时候,突然发现不能像jquery一样$(this)获取事件,然后才发现在vue里面获取事件对象可以用event.currenttarget来获取
获取事件对象
- js的事件可以直接用this获取事件对象,
- jquery可以使用$(this)来获取事件对象。
- vue借助事件的 event 对象 currenttarget 获取事件对象
event.currenttarget
- html
<ul>
<li v-for="(item,item2) in catitmlst" v-bind:index="item2" v-on:click="eventobj">
<span id="eventobj">事件对象</span>
</li>
</ul>- js
//获取事件对象
eventobject(event){
let html = event.currenttarget
console.log(html)
//获得点击元素的前一个元素
event.currenttarget.previouselementsibling.innerhtml
//获得点击元素的第一个子元素
event.currenttarget.firstelementchild
//获得点击元素的下一个元素
event.currenttarget.nextelementsibling
//获得点击元素中id为eventobj的元素
event.currenttarget.getelementbyid("eventobj")
//获得点击元素的index(自定义的属性)
event.currenttarget.getattribute('index')
//获得点击元素的父级元素
event.currenttarget.parentelement
//获得点击元素的前一个元素的第一个子元素的html值
event.currenttarget.previouselementsibling.firstelementchild.innerhtml
}我目前还不是特别清楚,等我彻底搞明白了,我会在重新解释一下vue获取事件对象。
ie不兼容event.currenttarget
vue开发时实现点击选中获取dom效果使用:
json.parse(event.currenttarget.nextelementsibling.innertext);
但ie不兼容,改换为:
json.parse(event.srcelement.parentnode.lastchild.innertext);
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持代码网。
发表评论