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中默认的鼠标对象参数的更多相关文章

  1. Vue之vue中的data为什么是一个函数+vue中路径别名alias设置

    问题描述 为什么在vue组件中,我们的data属性必须是一个函数,new Vue()中的data除外,因为new Vue中只有一个data属性. 原因 因为我们能抽离出来的组件,肯定是具有复用性的,它 ...

  2. js节流防抖应用场景，以及在vue中节流防抖的具体实现

    故事背景: 项目有个需求是输入框在输入的时候进行搜索,展示下拉数据,但是没必要输入一个字都进行搜索,所以想到了在输入结束200毫秒后再进行搜索,从而引出来了 js的节流(throttle),防抖(de ...

  3. 将某页面中ajax中获取到的信息放置到sessionStorage中保存，并在其他页面调用这些数据。

    A页面代码: var obj = data.data; var infostr = JSON.stringify(obj);//转换json sessionStorage.obj = infostr; ...

  4. 原生js拖拽、jQuery拖拽、vue自定义指令拖拽

    原生js拖拽: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  5. 原生js如何获取当前所加载网页的文件路径和名称

    结合使用string对象中的substr()和lastIndexOf()方法. 当前页面路径:file:///C:/Users/Administrator/Desktop/test.html < ...

  6. 原生js怎样获取后台端口数据

    全称: XMLHttpReques <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  7. 原生js如何获取某一元素的高度

    三种方法: 1.document.getElementById("id").style.height,这种方法的前提是必须之前已经显示的在css中声明过height,才能取得正确的 ...

  8. java中的文件读取和文件写出：如何从一个文件中获取内容以及如何向一个文件中写入内容

    import java.io.BufferedReader; import java.io.BufferedWriter; import java.io.File; import java.io.Fi ...

  9. PHP中获取当前页面的完整URL & php $_SERVER中的SERVER_NAME 和HTTP_HOST的区别

    #测试网址:     http://localhost/blog/testurl.php?id=5 //获取域名或主机地址 echo $_SERVER['HTTP_HOST']."<b ...

随机推荐

  1. JavaScript知识复习

    JavaScript 数据类型 原始数据类型: number string boolean null undefined 对象:object: Function Array Date... 共有六种数 ...

  2. Unity 给FindGameObjectsWithTag排序

    GameObject[] patrol = GameObject.FindGameObjectsWithTag ("Player").OrderBy (g => g.tran ...

  3. HttpService解析

    HttpServlet容器响应Web客户请求流程如下: 1)Web客户向Servlet容器发出Http请求: 2)Servlet容器解析Web客户的Http请求: 3)Servlet容器创建一个Htt ...

  4. openGl超级宝典学习笔记 (2) 7个主要的几何图元

    点(GL_POINTS): 点总是正方形的像素,默认情况下,点的大小不受透视除法影响. 即无论与视点的距离怎样,它的大小都不改变.为了获得圆点.必须在抗锯齿模式下绘制点. 能够用glPointSize ...

  5. android CoordinatorLayout使用

    一.CoordinatorLayout有什么作用 CoordinatorLayout作为“super-powered FrameLayout”基本实现两个功能: 1.作为顶层布局 2.调度协调子布局 ...

  6. HDU2665 kth number 线段树做法

    题意:求区间第k小 思路: 线段树 每个节点上保存 当前区间已经排序好的序列 (归并一下就好了嘛 复杂度 O(l)的) 这样建树的时空复杂度都是 O(nlogn)的 对于 每次询问 二分一个答案 在树 ...

  7. Gym - 100338E Numbers 贪心

    Gym - 100338E 题意:给你n,k问在1-n中能整出k的字典序最小的数.范围1018 思路:比较简单的贪心了,枚举10的幂m,然后加上k-m%k, 更新答案就可以了,数据一定要用unsign ...

  8. Web API总结

    1.Web API 控制器(Controller) 继承ApiController 2. Api 的 Url Map: api/{controller}/{id} 每个"Action&quo ...

  9. Ubuntu下通过Firefox Opera Chromium浏览器直接执行java应用程序（打开java jnlp文件）实现在服务器远程虚拟控制台完成远程管理的方法

    远程虚拟控制台依赖于java运行环境(jre),在通过浏览器打开链接前,系统必须安装jre环境,远程管理控制台其实就是一个java程序,打开相应的网站会下载一个jnlp(java网络加载协议)的文件, ...

  10. React开发实时聊天招聘工具 -第二章

    2-1 介绍React开发环境 npm install -g create-react-app xxx npm run eject   来配置webpack 2-2 ES6常用语法 其他 还有一些特性 ...