Of Stack

vue. js click click event to get the operation of the current element object

  • 2021-08-06 19:53:05
  • OfStack

Vue. js can pass the $event object 


<body id="app">
 <ul>
 <li v-on:click="say('hello!', $event)"> Click the current line of text </li>
 <li>li2</li>
 <li>li3</li>
 </ul>
 <script>
 new Vue({
  el: '#app',
  data: {
  message: 'Hello Vue.js!'
  },
  methods: {
  say: function(msg, event) {
   // Get the click object   
   var el = event.currentTarget;
   alert(" Content of the current object: "+el.innerHTML);
  }
 }
 })
 </script>
 </body>
属性 描述
bubbles 返回布尔值，指示事件是否是起泡事件类型。
cancelable 返回布尔值，指示事件是否可拥可取消的默认动作。
currentTarget 返回其事件监听器触发该事件的元素。
eventPhase 返回事件传播的当前阶段。
target 返回触发此事件的元素（事件的目标节点）。
timeStamp 返回事件生成的日期和时间。
type 返回当前 Event 对象表示的事件的名称。

currentTarget: The currentTarget event property returns the node whose listener fired the event, that is, the element, document, or window that currently handles the event.

Popular 1 point, that is, which 1 element your click event is bound to, currentTarget gets which 1 element.

target: The target event property returns the target node of the event (the node that triggered the event), such as the element, document, or window that generated the event.

Popular point 1, that is, which element you currently click on, target gets which element. 


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

Additional knowledge: vue gets the subscript of the currently clicked object and the content of the currently clicked object

< li v-for="(item,index) in tabList" v-on:click="addClass(index,$event)" > {{item.title}} < /li >

data states: 


data() {
 return {
  tabList: [
  { id: 0, title: " Home page 1" },
  { id: 1, title: " Home page 2" },
  { id: 2, title: " Home page 3" }
  ],
  current:0
 };
 },


methods: {
 addClass: function(index,event) {
  this.current = index;
  // Get the click object   
  var el = event.currentTarget;
  console.log(" Content of the current object: "+el.innerHTML);
  console.log(this.current)
 }
Related articles: