当前位置: 代码网 > it编程>编程语言>Javascript > Vue事件获取事件对象之event.currentTarget详解

Vue事件获取事件对象之event.currentTarget详解

2024年05月18日 Javascript 我要评论
vue事件获取事件对象event.currenttarget在学习vue的时候,在进行tab栏切换的时候,突然发现不能像jquery一样$(this)获取事件,然后才发现在vue里面获取事件对象可以用

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);

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持代码网。

(0)

相关文章:

版权声明:本文内容由互联网用户贡献,该文观点仅代表作者本人。本站仅提供信息存储服务,不拥有所有权,不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 2386932994@qq.com 举报,一经查实将立刻删除。

发表评论

验证码:
Copyright © 2017-2025  代码网 保留所有权利. 粤ICP备2024248653号
站长QQ:2386932994 | 联系邮箱:2386932994@qq.com