博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
《Javascript高级程序设计 (第三版)》第13章 事件
阅读量:5823 次
发布时间:2019-06-18

本文共 3801 字,大约阅读时间需要 12 分钟。

模拟事件

DOM中的事件模拟

可以在 document 对象上使用 createEvent() 方法创建 event 对象。

  1. UIEvents :一般化的 UI 事件。鼠标事件和键盘事件都继承自 UI 事件。DOM3 级中是 UIEvent 。

  2. MouseEvents :一般化的鼠标事件。DOM3 级中是 MouseEvent 。

  3. MutationEvents :一般化的 DOM 变动事件。DOM3 级中是 MutationEvent 。

  4. HTMLEvents :一般化的 HTML 事件。没有对应的 DOM3 级事件(HTML 事件被分散到其他类 别中)。

在创建了 event 对象之后,还需要使用与事件有关的信息对其进行初始化。每种类型的 event 对象都有一个特殊的方法,为它传入适当的数据就可以初始化该 event 对象。不同类型的这个方法的名字也不相同,具体要取决于 createEvent() 中使用的参数。模拟事件的最后一步就是触发事件。这一步需要使用 dispatchEvent() 方法,所有支持事件的DOM 节点都支持这个方法。调用 dispatchEvent() 方法时,需要传入一个参数,即表示要触发事件的 event 对象。触发事件之后,该事件就跻身“官方事件”之列了,因而能够照样冒泡并引发相应事件处理程序的执行。

  • 模拟鼠标事件

创建鼠标事件对象的方法是为 createEvent() 传入字符串 "MouseEvents" 。返回的对象有一个名为 initMouseEvent() 方法,用于指定与该鼠标事件有关的信息。这些参数的含义如下。

  1. type (字符串):表示要触发的事件类型,例如 "click" 。

  2. bubbles (布尔值):表示事件是否应该冒泡。为精确地模拟鼠标事件,应该把这个参数设置为true 。

  3. cancelable (布尔值):表示事件是否可以取消。为精确地模拟鼠标事件,应该把这个参数设置为 true 。

  4. view (AbstractView):与事件关联的视图。这个参数几乎总是要设置为 document.defaultView 。

  5. detail (整数):与事件有关的详细信息。这个值一般只有事件处理程序使用,但通常都设置为 0 。

  6. screenX (整数):事件相对于屏幕的 X 坐标。

  7. screenY (整数):事件相对于屏幕的 Y 坐标。

  8. clientX (整数):事件相对于视口的 X 坐标。

  9. clientY (整数):事件想对于视口的 Y 坐标。

  10. ctrlKey (布尔值):表示是否按下了 Ctrl 键。默认值为 false 。

  11. altKey (布尔值):表示是否按下了 Alt 键。默认值为 false 。

  12. shiftKey (布尔值):表示是否按下了 Shift 键。默认值为 false 。

  13. metaKey (布尔值):表示是否按下了 Meta 键。默认值为 false 。

  14. button (整数):表示按下了哪一个鼠标键。默认值为 0 。

  15. relatedTarget (对象):表示与事件相关的对象。这个参数只在模拟 mouseover 或 mouseout时使用。

initMouseEvent() 方法的这些参数是与鼠标事件的 event 对象所包含的属性一一对应的。其中,前 4 个参数对正确地激发事件至关重要,因为浏览器要用到这些参数;而剩下的所有参数只有在事件处理程序中才会用到。当把 event 对象传给 dispatchEvent() 方法时,这个对象的 target属性会自动设置。

var btn = document.getElementById("myBtn");//创建事件对象var event = document.createEvent("MouseEvents");//初始化事件对象event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0,false, false, false, false, 0, null);//触发事件btn.dispatchEvent(event);
  • 模拟键盘事件

    调用 createEvent() 并传入"KeyboardEvent" 就可以创建一个键盘事件。返回的事件对象会包含一个 initKeyEvent() 方法,这个方法接收下列参数。

  1. type (字符串):表示要触发的事件类型,如 "keydown" 。

  2. bubbles (布尔值):表示事件是否应该冒泡。为精确模拟鼠标事件,应该设置为 true 。

  3. cancelable (布尔值):表示事件是否可以取消。为精确模拟鼠标事件,应该设置为 true 。

  4. view ( AbstractView ):与事件关联的视图。这个参数几乎总是要设置为 document.defaultView 。

  5. key (布尔值):表示按下的键的键码。

  6. location (整数):表示按下了哪里的键。0 表示默认的主键盘,1 表示左,2 表示右,3 表示 数字键盘,4表示移动设备(即虚拟键盘),5 表示手柄。

  7. modifiers (字符串):空格分隔的修改键列表,如 "Shift" 。

  8. repeat (整数):在一行中按了这个键多少次。

var textbox = document.getElementById("myTextbox"),event;if (document.implementation.hasFeature("KeyboardEvents", "3.0")){    event = document.createEvent("KeyboardEvent");//初始化事件对象    event.initKeyboardEvent("keydown", true, true, document.defaultView, "a",0, "Shift", 0);}//触发事件textbox.dispatchEvent(event)
  • 模拟其他事件

    模拟变动事件和HTML 事件。

var event = document.createEvent("HTMLEvents");event.initEvent("focus", true, false);target.dispatchEvent(event);
  • 自定义 DOM 事件

    自定义事件不是由 DOM 原生触发的,它的目的是让开发人员创建自己的事件。要创建新的自定义事件,可调用 createEvent("CustomEvent") 。返回的对象有一个名为 initCustomEvent() 的方法。

  1. type (字符串):触发的事件类型,例如 "keydown"。

  2. bubbles (布尔值):表示事件是否应该冒泡。

  3. cancelable (布尔值):表示事件是否可以取消。

  4. detail (对象):任意值,保存在 event 对象的 detail 属性中。

var div = document.getElementById("myDiv"),event;EventUtil.addHandler(div, "myevent", function(event){    alert("DIV: " + event.detail);});EventUtil.addHandler(document, "myevent", function(event){    alert("DOCUMENT: " + event.detail);});if (document.implementation.hasFeature("CustomEvents", "3.0")){    event = document.createEvent("CustomEvent");    event.initCustomEvent("myevent", true, false, "Hello world!");    div.dispatchEvent(event);}

IE中的事件模拟

调用 document.createEventObject() 方法可以在 IE 中创建 event对象。(不接受参数,结果会返回一个通用的 event 对象)

目标上调用 fireEvent()方法,这个方法接受两个参数:事件处理程序的名称和 event 对象。

var btn = document.getElementById("myBtn");//创建事件对象var event = document.createEventObject();//初始化事件对象event.screenX = 100;event.screenY = 0;event.clientX = 0;event.clientY = 0;event.ctrlKey = false;event.altKey = false;event.shiftKey = false;event.button = 0;//触发事件btn.fireEvent("onclick", event);

转载地址:http://cgbdx.baihongyu.com/

你可能感兴趣的文章
iOS 简单数据的读写
查看>>
记录一次蚂蚁金服前端电话面试
查看>>
RecyclerView预加载机制源码分析
查看>>
直播源码开发视频直播平台,不得不了解的流程
查看>>
Ubuntu上的pycrypto给出了编译器错误
查看>>
聊聊flink的RestClientConfiguration
查看>>
在CentOS上搭建git仓库服务器以及mac端进行克隆和提交到远程git仓库
查看>>
測試文章
查看>>
Flex很难?一文就足够了
查看>>
【BATJ面试必会】JAVA面试到底需要掌握什么?【上】
查看>>
微服务b2b b2c o2o电子商务云平台
查看>>
上手kubernetes之前,你应该知道这6件事
查看>>
CollabNet_Subversion小结
查看>>
mysql定时备份自动上传
查看>>
Windows Thin PC安装功能组件
查看>>
Linux 高可用集群解决方案
查看>>
[install-pear-installer] Error 127 安装PHP时错误
查看>>
17岁时少年决定把海洋洗干净,现在21岁的他做到了
查看>>
CBO中 SMON 进程与 col_usage$ 的维护
查看>>
linux 启动oracle
查看>>