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. php八大设计模式之装饰器模式

    我们都知道,得到一匹布需要大概这么几步: 1.染色 2.印花 3.裁剪 这种形式在面向对象中怎么实现呢? 面向过程[继承模式]实现: 继承模式得到需要的布料,一步一步的加工. 继承的层次越来越深,扩展 ...

  2. [Bug]Python3.x SyntaxError: 'ascii' codec can't decode byte 0xe4 in position

    安装arch后就没再用python了 昨天管服务器的大佬在跑贝叶斯分类器的时候发现正确率有问题 我赶紧去做优化,然后就有这样的报错 Python 3.6.4 (default, Jan 5 2018, ...

  3. eBay起诉指控亚马逊利用非法手段挖走其卖家

    [摘要]eBay在诉状中称,亚马逊的代表滥用eBay的内部电子邮件系统联系卖家,这违反了市场政策. 腾讯科技讯 10月18日消息,据外媒报道,拍卖网站eBay对亚马逊提起诉讼,指控这家美国零售巨头利用 ...

  4. element-ui table 行内编辑

    EditRow.ts vue+element-ui+slot-scope原生实现可编辑表格 interface NoParamConstructor<T> { new(): T; } ex ...

  5. QQ音乐

    import re import requestsimport json class Search: def __init__(self, song): ''' self.vkey_url ---&g ...

  6. WHU 1552 Seats 枚举

    题意: 有一个年级中7个班的n个学生. 一天,他们毫无顺序的站成一排.请计算最小的交换次数,使得 相同班的同学都站在一起. (只有站在一起的人才能交换) 思路: 如果知道班级的最终排列就能在很短的时间 ...

  7. Linux学习之socket编程（一）

    socket编程 socket的概念: 在TCP/IP协议中,“IP地址+TCP或UDP端口号”唯一标识网络通讯中的一个进程,“IP地址+端口号”就称为socket. 在TCP协议中,建立连接的两个进 ...

  8. 【计算机视觉】基于Kalman滤波器的进行物体的跟踪

    预估器 我们希望能够最大限度地使用測量结果来预计移动物体的运动. 所以,多个測量的累积能够让我们检測出不受噪声影响的部分观測轨迹. 一个关键的附加要素即此移动物体运动的模型. 有了这个模型,我们不仅能 ...

  9. 如何调试Blink?

    内容 尽管有很多工具和技巧可用于调试Blink,这个文章的重点调试Blink除布局測试之外的feature. 1 介绍 2 Linux 2.1 入门 2.2 启动Debugger 3 实用的工具 3. ...

  10. Spring MVC 返回视图时添加的模型数据------POJO

    POJO(Plain Old Java Objects)简单的Java对象,实际就是普通JavaBeans,是为了避免和EJB混淆所创造的简称. 使用POJO名称是为了避免和 EJB混淆起来, 而且简 ...