原生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 ...
随机推荐
- 隐藏div，文本框角圆滑，消除外边框
#div_1 /*将div设置完成,并且隐藏,当需要的时候对其属性值进行修改*/ { height: 36px; width: 1099px; background-color: #F0DFDF; m ...
- GIL解释锁及进程池和线程池
官方介绍 ''' 定义: In CPython, the global interpreter lock, or GIL, is a mutex that prevents multiple nati ...
- 用xmanager6启动Linux上的图形界面程序
1.下载Xmanager6 并自行安装,这里不赘述了 2.打开Xmanager.启动Xstart 3.按提示输入:主机IP,协议,用户名,命令,完成后点击“保存”,接着点击“运行”,运行xmanage ...
- 【Codeforces Round #462 (Div. 1) B】A Determined Cleanup
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 设\(设f(x)=a_d*x^{d}+a_{d-1}*x^{d-1}+...+a_1*x+a_0\) 用它去除x+k 用多项式除法除 ...
- 【Codeforces Round #422 (Div. 2) C】Hacker, pack your bags!(hash写法)
接上一篇文章; 这里直接把左端点和右端点映射到vector数组上; 映射一个open和close数组; 枚举1..2e5 如果open[i]内有安排; 则用那个安排和dp数组来更新答案; 更新答案完之 ...
- Win 7中开启Telnet功能
参看以下文章: http://winsystem.ctocio.com.cn/Longhorn/472/8756972.shtml
- 洛谷 P1096 Hanoi双塔问题
P1096 Hanoi双塔问题 题目描述 给定A.B.C三根足够长的细柱,在A柱上放有2n个中间有孔的圆盘,共有n个不同的尺寸,每个尺寸都有两个相同的圆盘,注意这两个圆盘是不加区分的(下图为n=3的情 ...
- uva 1292 树形dp
UVA 1292 - Strategic game 守卫城市,城市由n个点和n-1条边组成的树,要求在点上安排士兵,守卫与点相连的边.问最少要安排多少士兵. 典型的树形dp.每一个点有两个状态: dp ...
- 怎样安装Windows7操作系统
1. 打开电脑,插入Windows7安装光盘. 2. 又一次启动电脑: 3. 依据提示按下对应的键.进入选择启动项菜单选择光驱引导.在"Boot Menu"界面按键盘上下键选 ...
- 权重轮询调度算法 java版本号
权重轮询调度算法(Weighted Round-Robin Scheduling)--java版本号 因为每台server的配置.安装的业务应用等不同.其处理能力会不一样.所以,我们依据server的 ...