原生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 ...
随机推荐
- 4、Go for循环
package main import "fmt" func main(){ //for 循环是go语言唯一的循环结构,分为三种类型 //第一种 类似while i:=1 for ...
- python_webApp
提高开发效率:当更改代码后,不重启服务器就能使用新效果 参考链接:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df ...
- ZJU 1346 Comparing Your Heroes 状态压缩DP 拓扑排序的计数
做多校的时候遇见一个求拓扑排序数量的题,就顺便来写了一下. 题意: 你有个朋友是KOF的狂热粉丝,他有一个对其中英雄的强弱比较,让你根据这些比较关系来给这些英雄排名.问一共有多少种排名方式. 思路: ...
- 【ICM Technex 2018 and Codeforces Round #463 (Div. 1 + Div. 2, combined) A】 Palindromic Supersequence
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 字符串倒着加到原串右边就好 [代码] #include <bits/stdc++.h> using namespace ...
- POJ1158 城市交通Traffic lights IOI 1999 (最短路)
POJ1158 城市交通Traffic lights IOI 1999 (最短路) (1) 问题描述(probolem) 在d城里交通的安排不同寻常,城中有路口和路口之间的道路,再任意两个不同的路口之 ...
- ORA-01555错误总结（二）
这篇文章紧接着上一篇"ORA-01555错误总结(一)".主要描写叙述延迟块清除导致的ORA-01555错误. 以下是一些简介(上一遍已经介绍过) ORA-01555错误是一种在o ...
- 算法导论————KMP
[例题传送门:caioj1177] KMP模版:子串是否出现 [题意]有两个字符串SA和SB,SA是母串,SB是子串,问子串SB是否在母串SA中出现过.如果出现过输出第一次出现的起始位置和结束位置,否 ...
- Lesson 2 Building your first web page: Part 3
Time to build your first HTML page by hand I could go on with more theory and send half of you to sl ...
- 2015北京网络赛 G Boxes BFS+打表
G Boxes 题意:n个位置摆有n个箱子,每次移动只能把相邻的垒起来,且上面的必须小于下面的.求摆成升序需要移动多少步. 思路:这里的n很小,只有7.但是bfs最快的情况需要2s左右,所以就打表了. ...
- 威联通NAS 网站无法登录，可以ssh情况下重启设备方法
步骤: 1.VPN登录NAS 2.PUTTY SSH登录设备 3.reboot设备 等待重启约5分钟.