vue.js click点击事件获取当前元素对象的操作


Posted in Javascript onAugust 07, 2020

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

补充知识:vue获取当前点击对象的下标,和当前点击对象的内容

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

data里面声明:

data() {
 return {
  tabList: [
  { id: 0, title: "首页1" },
  { id: 1, title: "首页2" },
  { id: 2, title: "首页3" }
  ],
  current:0
 };
 },
methods: {
 addClass: function(index,event) {
  this.current = index;
  //获取点击对象  
  var el = event.currentTarget;
  console.log("当前对象的内容:"+el.innerHTML);
  console.log(this.current)
 }

以上这篇vue.js click点击事件获取当前元素对象的操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript写了一个清除“logo1_.exe”的杀毒工具(可扫描目录)
Feb 09 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
JS常见问题整理(持续更新)
Aug 06 Javascript
JS动态添加iframe的代码
Sep 14 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
Aug 05 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
vue2.0实战之使用vue-cli搭建项目(2)
Mar 27 Javascript
bootstrap栅格系统示例代码分享
May 22 Javascript
理解javascript async的用法
Aug 22 Javascript
anime.js 实现带有描边动画效果的复选框(推荐)
Dec 24 Javascript
JavaScript实现微信红包算法及问题解决方法
Apr 26 Javascript
vue.js 实现a标签href里添加参数
Nov 12 Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 #Javascript
JQuery通过键盘控制键盘按下与松开触发事件
Aug 07 #jQuery
vue递归获取父元素的元素实例
Aug 07 #Javascript
在vue中使用Base64转码的案例
Aug 07 #Javascript
JavaScript代码模拟鼠标自动点击事件示例
Aug 07 #Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 #Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
Aug 07 #Javascript
You might like
php 网上商城促销设计实例代码
2012/02/17 PHP
php中使用in_array() foreach array_search() 查找数组是否包含时的性能对比
2015/04/14 PHP
php实现中文字符截取防乱码方法汇总
2015/04/29 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
让焦点自动跳转
2006/07/01 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
2011/03/25 Javascript
jQuery父级以及同级元素查找介绍
2013/09/04 Javascript
jQuery.fn和jQuery.prototype区别介绍
2013/10/05 Javascript
判断某个字符在一个字符串中是否存在的js代码
2014/02/28 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
2014/06/03 Javascript
jQuery中size()方法用法实例
2014/12/27 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
JavaScript实现为input与textarea自定义hover,focus效果的方法
2015/08/21 Javascript
JQuery 的跨域方法推荐_可跨任何网站
2016/05/18 Javascript
AngularJS实现单独作用域内的数据操作
2016/09/05 Javascript
js, jQuery实现全选、反选功能
2017/03/08 Javascript
你可能不知道的前端算法之文字避让(inMap)
2018/01/12 Javascript
vue prop属性传值与传引用示例
2019/11/13 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
Python写的PHPMyAdmin暴力破解工具代码
2014/08/06 Python
说一说Python logging
2016/04/15 Python
python实现自动发送邮件发送多人、群发、多附件的示例
2018/01/23 Python
对Python3 goto 语句的使用方法详解
2019/02/16 Python
django用户登录验证的完整示例代码
2019/07/21 Python
详解Anconda环境下载python包的教程(图形界面+命令行+pycharm安装)
2019/11/11 Python
Python 必须了解的5种高级特征
2020/09/10 Python
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
学习党代会心得体会
2014/09/05 职场文书
房屋授权委托书范本
2014/10/07 职场文书
2014年业务员工作总结范文
2014/11/17 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
文明单位创建材料
2014/12/24 职场文书
导游词之南京栖霞山
2019/10/18 职场文书
Golang 空map和未初始化map的注意事项说明
2021/04/29 Golang
JavaScript与JQuery框架基础入门教程
2021/07/15 Javascript