让我万万没想到的是,原来《JavaScript高级程序设计(第3版)》里面提到的方法已经是过时的了.后来我查看了MDN,才找到了最新的方法.

  1. 模拟鼠标事件
    MDN上已经说得很清楚,尽管为了保持向后兼容MouseEvent.initMouseEvent()仍然可用,但是呢,我们应该使用MouseEvent().
    我们使用如下页面做测试

    <!DOCTYPE html>
    <html>
    <head lang="zh-CN">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title></title>
    <style>
    .button {
    width: 200px;
    height: 200px;
    background-color: antiquewhite;
    margin: 20px;
    text-align: center;
    line-height: 200px;
    }
    </style>
    </head>
    <body>
    <div class="button">Button</div>
    <script>
    "use strict";
    var btn = document.querySelector('.button');
    btn.addEventListener('click', function (event) {
    console.log('OH~!You clicked me~!');
    }, false);
    var ev = new MouseEvent('click', {
    cancelable: true,
    bubble: true,
    view: window
    });
    btn.dispatchEvent(ev);
    </script>
    </body>
    </html>

    打开一下这个页面,并且在打开控制台的情况下,你就可以看到控制台打印了一句话,证明模拟成功了.
    如下图所示:

    Screenshot from 2015-05-19 12:20:40.png

    当然,在构建这个MouseEvent对象的时候还是有很多属性可以填写的,不过,可能就是示例的那几个比较有用,如果像查看更多的属性,请查看如下地址
    (由于MouseEvent继承自UIEvent和Event,所以,他也继承了他们的属性)
    https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent
    https://developer.mozilla.org/en-US/docs/Web/API/UIEvent
    https://developer.mozilla.org/en-US/docs/Web/API/Event
    想查看MouseEvent()构造器的具体用法,请查看
    https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/MouseEvent

  2. 模拟键盘事件
    打开控制台,并且重新载入页面,你就可以看到控制台打印了字母'A'

    <!DOCTYPE html>
    <html>
    <head lang="zh-CN">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title></title>
    <style>
    .button {
    width: 200px;
    height: 200px;
    background-color: antiquewhite;
    margin: 20px;
    text-align: center;
    line-height: 200px;
    }
    </style>
    </head>
    <body>
    <div class="button">Button</div>
    <script>
    "use strict";
    var btn = document.querySelector('.button');
    document.addEventListener('keyup', function (event) {
    console.log(String.fromCharCode(event.keyCode));
    }, false);
    var ev = new KeyboardEvent('keyup', {
    keyCode: 65
    });
    document.dispatchEvent(ev);
    </script>
    </body>
    </html>

    如下是KeyBoardEvent的详细说明
    https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent

  3. 自定义事件
    自定义事件有两种方法,一种是使用new Event(),另一种是new customEvent()

    1. new Event()

      <!DOCTYPE html>
      <html>
      <head lang="zh-CN">
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1"/>
      <title></title>
      <style>
      .button {
      width: 200px;
      height: 200px;
      background-color: antiquewhite;
      margin: 20px;
      text-align: center;
      line-height: 200px;
      }
      </style>
      </head>
      <body>
      <div class="button">Button</div>
      <script>
      "use strict";
      var btn = document.querySelector('.button');
      var ev = new Event('test', {
      bubbles: 'true',
      cancelable: 'true'
      });
      btn.addEventListener('test', function (event) {
      console.log(event.bubbles);
      console.log(event.cancelable);
      console.log(event.detail);
      }, false);
      btn.dispatchEvent(ev);
      </script>
      </body>
      </html>

      运行效果如下所示,请先注意,event.detail的值为undefined

      Screenshot from 2015-05-19 12:37:01.png
    2. new customEvent()

      <!DOCTYPE html>
      <html>
      <head lang="zh-CN">
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1"/>
      <title></title>
      <style>
      .button {
      width: 200px;
      height: 200px;
      background-color: antiquewhite;
      margin: 20px;
      text-align: center;
      line-height: 200px;
      }
      </style>
      </head>
      <body>
      <div class="button">Button</div> <script>
      "use strict";
      var btn = document.querySelector('.button'); var ev = new CustomEvent('test', {
      bubbles: 'true',
      cancelable: 'true',
      detail: 'tcstory'
      });
      btn.addEventListener('test', function (event) {
      console.log(event.bubbles);
      console.log(event.cancelable);
      console.log(event.detail);
      }, false);
      btn.dispatchEvent(ev);
      </script>
      </body>
      </html>

      效果如下图

      Screenshot from 2015-05-19 12:40:30.png

      可以很明显的看到,其实new customEvent()比new Event()多了可以在event.detail属性里携带自定义数据的功能(event.detail的值为tcstory),这就是差别了.
      Event()的详细说明
      https://developer.mozilla.org/en-US/docs/Web/API/Event/Event
      customEvent() 的详细说明
      https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent

总结下来发现,除了模拟自定义事件比较有用的话,模拟鼠标事件和键盘事件则好像有点坑和不一致性.以模拟键盘事件来说吧.
KeyboardEvent.key在MDN上的文档被提示为推荐使用的属性,而KeyboardEvent.keyCode却被说成是不推荐使用的,应该使用key属性,然而你去看KeyboardEvent.key的文档就会发现,这个属性压根就没得到多少浏览器的支持,如果用这个属性,简直就是掉坑里了.
下图所示,一大片的红字啊

Screenshot from 2015-05-19 12:48:15.png

文/中华田园犬(简书作者)
原文链接:http://www.jianshu.com/p/418e9e35d5a1
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

js原生创建模拟事件和自定义事件的方法的更多相关文章

  1. javaScript事件机制深入学习(事件冒泡,事件捕获,事件绑定方式,移除事件方式,阻止浏览器默认行为,事件委托,模拟浏览器事件,自定义事件)

    前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...

  2. jQuery基础(鼠标事件,表单事件,键盘事件,自定义事件 篇)

    1.jQuery鼠标事件之click与dbclick事件   方法一:$ele.click()(不带参数)   <div id="test">点击触发<div&g ...

  3. jQuery-3.事件篇---自定义事件

    jQuery自定义事件之trigger事件 众所周知类似于mousedown.click.keydown等等这类型的事件都是浏览器提供的,通俗叫原生事件,这类型的事件是需要有交互行为才能被触发. 在j ...

  4. 63.ExtJs事件(自定义事件、on、eventManager)示例

    转自:https://blog.csdn.net/leadergg/article/details/5927614?utm_source=blogxgwz5 ExtJs事件(自定义事件.on.even ...

  5. jQuery事件命名空间多事件绑定自定义事件js 命名空间 javascript命名空间

    http://blog.csdn.net/pigpigpig4587/article/details/24727791 jQuery事件命名空间 jQuery支持事件命名空间,以方便事件管理.例如,在 ...

  6. jQuery on() 方法 为选定已存在元素和未来元素绑定标准事件和自定义事件

    很有必要说说jQuery的on方法,这个方法存在大乾坤大奥秘,主要注意两点: 1.为已存在元素和未来元素(动态添加元素)绑定处理函数. 2.自定义一个非标准的事件并绑定处理函数. 定义和用法 on() ...

  7. Angular4.x Event (DOM事件和自定义事件)

    Angular组件和DOM元素通过事件与外部进行通信,两者中的事件绑定语法是相同的-(eventName)="expression": <button (click)=&qu ...

  8. Spring容器事件、自定义事件

    Spring容器内置事件,如容器的启动.停止.关闭.销毁等事件 <bean name="contextStartedHandler" class="com.nuts ...

  9. jQuery事件之自定义事件

    其实事件的bind和unbind,都是为了自定义事件做准备. 语法: $(selector).trigger(type, data); 作用:在每一个匹配的元素上触发某类事件,它触发的是由bind() ...

随机推荐

  1. 【Foreign】朗格拉日计数 [暴力]

    朗格拉日计算 Time Limit: 10 Sec  Memory Limit: 128 MB Description Input Output 仅一行一个整数表示答案. Sample Input 5 ...

  2. spoj p104 Matrix-Tree定理

    这个问题就是经典的生成树记数问题,题目为spoj p104 highway. 首先我们引入Matrix-Tree定理,由kirchhoff证明,定理的概述为,对于图G,我们定义若干个矩阵, D[G], ...

  3. [Leetcode Week10]01 Matrix

    01 Matrix 题解 原创文章,拒绝转载 题目来源:https://leetcode.com/problems/01-matrix/description/ Description Given a ...

  4. UVALIVE 5096 Volume

    This time your job is to calculate the volume of a special object. The object consists of two orthog ...

  5. Ubuntu10.04中利用V4L2读取摄像头数据并保存成文件【转】

    转自:http://blog.chinaunix.net/uid-29339876-id-4042245.html 利用V4L2读取UVC摄像头数据并保存成视频文件,主要参考http://linuxt ...

  6. 【POI2017||bzoj4726】Flappy Birds

    外国人很良心的啊,这题比NOIP那题还简单…… 不用管他最后的位置,因为移动的次数肯定是恒定的,所以维护在每一个柱子的位置能飞到的范围,递推下去即可. #include<bits/stdc++. ...

  7. Opencv第三章

    2. 下面这个练习是帮助掌握矩阵类型.创造一个三通道二维矩阵,字节类型,大小为100×100,并设置所有数值为0. a. 在矩阵中使用void cvCircle(CvArr* img, CvPoint ...

  8. docker从零开始 存储(六)存储驱动如何选择

    Docker存储驱动程序 理想情况下,将非常少的数据写入容器的可写层,并使用Docker卷来写入数据.但是,某些工作负载要求您能够写入容器的可写层.这是存储驱动程序的用武之地. Docker使用可插拔 ...

  9. EA(Enterprise Architect) UML 建模之活动图

    一.活动图的概念作用 活动图本质上是一种流程图,它描述活动的序列,即系统从一个活动到另一个活动的控制流. 活动图的作用:描述用例  .   描述类的操作.描述算法(单独使用) 二. 活动图的基本符号 ...

  10. [BZOJ1491][NOI2007]社交网络 floyd

    1491: [NOI2007]社交网络 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 2196  Solved: 1170[Submit][Status ...