原生js中获取this与鼠标对象以及vue中默认的鼠标对象参数
1、通过原生js获取this对象
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="" class="files" >
<label class="file" >
选择图片
<input type="file" id="file" name="file" onclick="onFileChange(this)"/>
</label>
</form>
</body>
<script src="js/vue.js"></script>
<script type="text/javascript">
function onFileChange(e) {
console.log(e.files)////获取图片
console.log(e.target)//获取键盘的目标对象
console.log(e.target.files) //获取图片
}
</script>
</html>
=>结果为：
2、原生js获取鼠标对象
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8" />
<title></title> </head> <body>
<form action="" class="files">
<label class="file">
选择图片
<input type="file" id="file" name="file" onclick="onFileChange(event)"/>
</label>
</form> </body>
<script src="js/vue.js"></script>
<script type="text/javascript">
function onFileChange(e) {
console.log(e.files) ////获取图片
console.log(e.target) //获取键盘的目标对象
console.log(e.target.files) //获取图片
}
</script> </html>
=>结果为：
3、vue中默认的鼠标参数
<form action="" class="files" >
<label class="file" >
选择图片
<input type="file" id="file" name="file" @click="onFileChange"/>
</label>
</form> methods:{
onFileChange(e){
console.log(e)
console.log(e.files)
console.log(e.target)
console.log(e.target.files)
},
}
=>结果为：
原生js中获取this与鼠标对象以及vue中默认的鼠标对象参数的更多相关文章
- Vue之vue中的data为什么是一个函数+vue中路径别名alias设置
问题描述 为什么在vue组件中,我们的data属性必须是一个函数,new Vue()中的data除外,因为new Vue中只有一个data属性. 原因 因为我们能抽离出来的组件,肯定是具有复用性的,它 ...
- js节流防抖应用场景，以及在vue中节流防抖的具体实现
故事背景: 项目有个需求是输入框在输入的时候进行搜索,展示下拉数据,但是没必要输入一个字都进行搜索,所以想到了在输入结束200毫秒后再进行搜索,从而引出来了 js的节流(throttle),防抖(de ...
- 将某页面中ajax中获取到的信息放置到sessionStorage中保存，并在其他页面调用这些数据。
A页面代码: var obj = data.data; var infostr = JSON.stringify(obj);//转换json sessionStorage.obj = infostr; ...
- 原生js拖拽、jQuery拖拽、vue自定义指令拖拽
原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- 原生js如何获取当前所加载网页的文件路径和名称
结合使用string对象中的substr()和lastIndexOf()方法. 当前页面路径:file:///C:/Users/Administrator/Desktop/test.html < ...
- 原生js怎样获取后台端口数据
全称: XMLHttpReques <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- 原生js如何获取某一元素的高度
三种方法: 1.document.getElementById("id").style.height,这种方法的前提是必须之前已经显示的在css中声明过height,才能取得正确的 ...
- java中的文件读取和文件写出：如何从一个文件中获取内容以及如何向一个文件中写入内容
import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File; import java.io.Fi ...
- PHP中获取当前页面的完整URL & php $_SERVER中的SERVER_NAME 和HTTP_HOST的区别
#测试网址: http://localhost/blog/testurl.php?id=5 //获取域名或主机地址 echo $_SERVER['HTTP_HOST']."<b ...
随机推荐
- js确认框confirm()用法实例详解
先为大家介绍javascript确认框的三种使用方法,具体内容如下 第一种方法:挺好用的,确认以后才能打开下载地址页面.原理也比较清晰.主要用于删除单条信息确认. ? 1 2 3 4 5 6 7 8 ...
- RMAN备份脚本--DataGuard primary
单机环境全备 export ORACLE_BASE=/oracle export ORACLE_HOME=$ORACLE_BASE/product/10.2.0/db_1 export ORACL ...
- windows或linux安装python
一.windows安装 先进入 python 官网:https://www.python.org/downloads/windows/ 选择合适的版本下载: 下载完成,双击运行安装[勾选Add to ...
- JS由Number与new Number的区别引发的思考
在回答园子问题的时候发现了不少新东西,写下来分享一下 == 下面的图就是此篇的概览,另外文章的解释不包括ES6新增的Symbol,话说这货有包装类型,但是不能new... 基于JS是面向对象的,所以我 ...
- BZOJ 3787 Gty的文艺妹子序列(分块+树状数组+前缀和）
题意 给出n个数,要求支持单点修改和区间逆序对,强制在线. n,m<=50000 题解 和不带修改差不多,预处理出smaller[i][j]代表前i块小于j的数的数量,但不能用f[i][j]代表 ...
- center os 7最小化安装后按table无法补全命令的问题
闲来无趣,这两天huskiesir又重新安装了下center os 7操作系统,结果呢,发现一个问题:按table键无法补全命令啊. 咦,奇怪了,这次怎么回事,完全没遇到过啊.哦,回想了一下,和以往的 ...
- vs2010和qt4.8.4配置
最近项目要求在vs中开发qt程序,安装过后发现代码每天提示功能.由于本人记忆力有限,特在网上收罗了些配置方法. vs安装目录采用默认,qt安装目录:C:\Qt\4.8.4vs 在系统环境变量新建QTD ...
- 使用JEECG心得
使用JEECG心得 我就不做JEECG的介绍了,提供一个网址.能够更加清晰的了解JEECG文档. http://www.jeecg.org/book/jeecg_v3.html 用JEECG已经几乎相 ...
- Android开发之Volley网络通信框架
今天用了一下Volley网络通信框架,感觉挺好用的,写个博客记录一下用法.方便以后VC. Volley(Google提供的网络通信库,能使网络通信更快,更简单,更健壮.) 功能模块: 1. JSON, ...
- 免费WiFi初体验——个小白的WiFi旅程
说来羞愧,真正接触到WiFi还是在毕业后,此前自己封闭在一个人的世界,再加上外在学校的包围,我还成了个"山里"的孩子. 去年毕业了,也算是个90后,可自觉得心态过于成熟.了解外界太 ...