Vue事件獲取觸發事件物件和繫結事件物件

許世龍發表於2020-11-29
Vue事件物件

Vue.js可以傳遞$event物件

<body id="app">
  <ul>
    <li v-on:click="say('hello!', $event)">點選當前行文字</li>
    <li>li2</li>
    <li>li3</li>
  </ul>
  <script>
   new Vue({
       el: '#app',
       data: {
        message: 'Hello Vue.js!'
       },
       methods: {
        say: function(msg, event) {
           //獲取點選物件      
           var el = event.currentTarget;
           alert("當前物件的內容："+el.innerHTML);
        }
    }
   })
  </script>
 </body>
屬性描述
bubbles返回布林值，指示事件是否是起泡事件型別。
cancelable返回布林值，指示事件是否可擁可取消的預設動作。
currentTarget返回其事件監聽器觸發該事件的元素。
eventPhase返回事件傳播的當前階段。
target返回觸發此事件的元素（事件的目標節點）。
timeStamp返回事件生成的日期和時間。
type返回當前 Event 物件表示的事件的名稱。

currentTarget：currentTarget 事件屬性返回其監聽器觸發事件的節點，即當前處理該事件的元素、文件或視窗。
通俗一點說，就是你的點選事件繫結在哪一個元素上，currentTarget獲取到的就是哪一個元素。

target：target 事件屬性可返回事件的目標節點（觸發該事件的節點），如生成事件的元素、文件或視窗。
通俗一點說，就是你當前點選的是哪一個元素，target獲取到的就是哪一個元素。

<li v-for="img in willLoadImg" @click="selectImg($event)">
    <img class="loadimg" :src="img.url" :data-id="img.id"  alt="">
</li>

methods: {
    selectImg(event) {
            console.log(event.currentTarget);
            console.log(event.target);
    }
}

closest 獲取事件源外層元素

使用：data-XXX 來繫結

 <div class="custom-tree-node"
              @click="getid"
               :data-id="1"
</div>

獲取 ：

利用closeet 獲取到當前目標元素最近的外層元素含有 custom-tree-node 類名的dom

然後再利用 dataset.id 拿到傳的值

 async getid (event) {
      let customNode = event.target.closest('.custom-tree-node').dataset.id
     customNode //=> 1

相關文章