原生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 ...
随机推荐
- 最短路径—Dijkstra 算法和Floyd 算法
某省自从实行了很多年的畅通工程计划后,终于修建了很多路.不过路多了也不好,每次要从一个城镇到另一个城镇时,都有许多种道路方案可以选择,而某些方案要比另一些方案行走的距离要短很多.这让行人很困扰. 现在 ...
- sys.path
sys.path.append() 和 sys.path.insert() python程序中使用 import XXX 时,python解析器会在当前目录.已安装和第三方模块中搜索 xxx,如果都搜 ...
- [ZJOI2012]旅游 对偶图 树的直径
Code: // luogu-judger-enable-o2 #include<cstdio> #include<iostream> #include<algorith ...
- HDU 4889 Scary Path Finding Algorithm
其实这个题是抄的题解啦…… 题解给了一个图,按照那个图模拟一遍大概就能理解了. 题意: 有一段程序,给你一个C值(程序中某常量),让你构造一组数据,使程序输出"doge" 那段代码 ...
- web——前后端通信原理
前端向后台传输数据: 传输方法:post get 区别: (1)get:用于从服务器获取数据,将参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看 ...
- Liquibase简介（1）
Liquibase是一个用于跟踪.管理和应用数据库变化的开源的数据库重构工具.它将所有数据库的变化(包括结构和数据)都保存在XML文件中,便于版本控制. Liquibase具备如下特性: * 不依赖于 ...
- swift 动态设置UILabel的高度
import UIKit class ViewController3: UIViewController { override func viewDidLoad() { ...
- c3p0出现 An attempt by a client to checkout a Connection has timed out
java.sql.SQLException: An attempt by a client to checkout a Connection has timed out. at com.mchange ...
- POJ - 3984 - 迷宫问题 （DFS）
迷宫问题 Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 10936 Accepted: 6531 Description ...
- Android Volley 具体解释 Google公布的一套用于网络通信的工具库
下载地址:git clone https://android.googlesource.com/platform/frameworks/volley 或 : https://github.com/mc ...