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. hadoop的mapReduce和Spark的shuffle过程的详解与对比及优化

    https://blog.csdn.net/u010697988/article/details/70173104 大数据的分布式计算框架目前使用的最多的就是hadoop的mapReduce和Spar ...

  2. phpstorm10安装并汉化

    一.下载phpstorm 下载地址:https://pan.baidu.com/s/1R64ZROVP1ljGbYfCwWjwxA 二.一直点击下一步安装即可 注意:第3步的时候选择一下支持的后缀 三 ...

  3. JS动态创建表单post提交

    <script> //@创建表单方法 function post(URL, PARAMS) { var temp = document.createElement("form&q ...

  4. JDBC连接SQL Server遇到的问题

    需要使用到微软的JDBC sql server的驱动类,去官网下载jar包 使用的URL模式:"jdbc:sqlserver:地址:端口//;databaseName=YourDatabas ...

  5. 《2017全球人工智能人才白皮书》发布丨解读世界顶级AI牛人的秘密——腾讯研究院

    <2017全球人工智能人才白皮书>发布丨解读世界顶级AI牛人的秘密——腾讯研究院:下载链接:http://www.tisi.org/c16 这个报告写的很好,排版布局,表格,色调,内容都值 ...

  6. XML和Schema命名空间详解

    来源:https://blog.csdn.net/wanghuan203/article/details/9204337 XML和Schema具有无关平台,技术厂商,简单,规范统一等特点,极具开放性, ...

  7. Java基础学习总结（14）——Java对象的序列化和反序列化

    一.序列化和反序列化的概念 把对象转换为字节序列的过程称为对象的序列化. 把字节序列恢复为对象的过程称为对象的反序列化. 对象的序列化主要有两种用途: 1) 把对象的字节序列永久地保存到硬盘上,通常存 ...

  8. 找出BST里面与Target最接近的n个数

    http://www.cnblogs.com/jcliBlogger/p/4771342.html 这里给了两种解法,一种是利用C++的priority_queue,然后逐个node输入. 另一种是先 ...

  9. traits的介绍

    traits基本利用了上一篇文章的思想,通过局部特化,来返回针对特定类型的信息. 可以自己实现traits,约定俗成了,返回特性信息. 也可以利用iterator的traits信息. iterator ...

  10. 给一个执行在windows 7和NAT下的VMWARE虚拟机分配固定IP

    虚拟机上装了个oracleserver,每次vmware重新启动或者resume时总要分配新的IP地址,这样就得改动windows下的client配置,所以须要想办法把IP地址固定住. DHCP服务在 ...