今天在学习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获取事件对象。

Logo

前往低代码交流专区

更多推荐