《Javascript高级程序设计 (第三版)》第13章事件

tinylcy 发布于2019-08-21 17:42 / 807人阅读

摘要：一般化的变动事件。没有对应的级事件事件被分散到其他类别中。与事件关联的视图。布尔值表示按下的键的键码。布尔值表示事件是否应该冒泡。创建事件对象初始化事件对象触发事件

模拟事件 DOM中的事件模拟

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

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

MouseEvents ：一般化的鼠标事件。DOM3 级中是 MouseEvent 。

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

HTMLEvents ：一般化的 HTML 事件。没有对应的 DOM3 级事件（HTML 事件被分散到其他类别中）。

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

模拟鼠标事件

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

type （字符串）：表示要触发的事件类型，例如 "click" 。

bubbles （布尔值）：表示事件是否应该冒泡。为精确地模拟鼠标事件，应该把这个参数设置为true 。

cancelable （布尔值）：表示事件是否可以取消。为精确地模拟鼠标事件，应该把这个参数设置为 true 。

view （AbstractView）：与事件关联的视图。这个参数几乎总是要设置为 document.defaultView 。

detail （整数）：与事件有关的详细信息。这个值一般只有事件处理程序使用，但通常都设置为 0 。

screenX （整数）：事件相对于屏幕的 X 坐标。

screenY （整数）：事件相对于屏幕的 Y 坐标。

clientX （整数）：事件相对于视口的 X 坐标。

clientY （整数）：事件想对于视口的 Y 坐标。

ctrlKey （布尔值）：表示是否按下了 Ctrl 键。默认值为 false 。

altKey （布尔值）：表示是否按下了 Alt 键。默认值为 false 。

shiftKey （布尔值）：表示是否按下了 Shift 键。默认值为 false 。

metaKey （布尔值）：表示是否按下了 Meta 键。默认值为 false 。

button （整数）：表示按下了哪一个鼠标键。默认值为 0 。

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() 方法，这个方法接收下列参数。

type （字符串）：表示要触发的事件类型，如 "keydown" 。

bubbles （布尔值）：表示事件是否应该冒泡。为精确模拟鼠标事件，应该设置为 true 。

cancelable （布尔值）：表示事件是否可以取消。为精确模拟鼠标事件，应该设置为 true 。

view （ AbstractView ）：与事件关联的视图。这个参数几乎总是要设置为 document.defaultView 。

key （布尔值）：表示按下的键的键码。

location （整数）：表示按下了哪里的键。0 表示默认的主键盘，1 表示左，2 表示右，3 表示数字键盘，4表示移动设备（即虚拟键盘），5 表示手柄。

modifiers （字符串）：空格分隔的修改键列表，如 "Shift" 。

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() 的方法。

type （字符串）：触发的事件类型，例如 "keydown"。

bubbles （布尔值）：表示事件是否应该冒泡。

cancelable （布尔值）：表示事件是否可以取消。

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);

服务器托管云服务器 javascript高级程序设计第三版 c语言程序设计第三版汇编语言程序设计第三版汇编语言程序设计第三版课后答案

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89881.html

JavaScript书籍测评

摘要：前言今天和大家一起聊聊的推荐书籍，每一本都是精选，做前端开发的朋友们如果没读过，可以尝试一下。如果怕麻烦，也可以关注晓舟报告，发送获取书籍，四个字，就可以得到电子书的提取码。前言今天和大家一起聊聊JavaScript的推荐书籍，每一本都是精选，做前端开发的朋友们如果没读过，可以尝试一下。下面给大家简单介绍了书的内容，还有读书的方法，希望可以帮大家提升读书效率。一、《JavaScr...

X1nFLY 2019-08-21 17:44 评论0 收藏0
重读《学习JavaScript数据结构与算法-第三版》- 第3章数组（二）

摘要：定场诗守法朝朝忧闷，强梁夜夜欢歌损人利己骑马骡，正值公平挨饿修桥补路瞎眼，杀人放火儿多我到西天问我佛，佛说我也没辙前言读学习数据结构与算法第章数组，本小节将继续为各位小伙伴分享数组的相关知识数组的新功能。定场诗守法朝朝忧闷，强梁夜夜欢歌；损人利己骑马骡，正值公平挨饿；修桥补路瞎眼，杀人放火儿多；我到西天问我佛，佛说：我也没辙！前言读《学习JavaScript数据结构与算法...

William_Sang 2019-08-26 14:01 评论0 收藏0
如果想成为一名顶尖的前端，这份书单你一定要收藏！

摘要：其中负载均衡那一节，基本上是参考的权威指南负载均衡的内容。开发指南读了一半，就是看这本书理解了的事件循环。哈哈创京东一本骗钱的书。欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由腾讯IVWEB团队发表于云+社区专栏作者：link 2014年一月以来，自己接触web前端开发已经两年多了，记录一下自己前端学习路上看过的，以及道听途说的一些书，基本上按照由浅入深来介绍...

callmewhy 2019-08-02 16:06 评论0 收藏0
如果想成为一名顶尖的前端，这份书单你一定要收藏！

摘要：其中负载均衡那一节，基本上是参考的权威指南负载均衡的内容。开发指南读了一半，就是看这本书理解了的事件循环。哈哈创京东一本骗钱的书。欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由腾讯IVWEB团队发表于云+社区专栏作者：link 2014年一月以来，自己接触web前端开发已经两年多了，记录一下自己前端学习路上看过的，以及道听途说的一些书，基本上按照由浅入深来介绍...

Scliang 2019-08-23 12:01 评论0 收藏0
如果想成为一名顶尖的前端，这份书单你一定要收藏！

摘要：其中负载均衡那一节，基本上是参考的权威指南负载均衡的内容。开发指南读了一半，就是看这本书理解了的事件循环。哈哈创京东一本骗钱的书。欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由腾讯IVWEB团队发表于云+社区专栏作者：link 2014年一月以来，自己接触web前端开发已经两年多了，记录一下自己前端学习路上看过的，以及道听途说的一些书，基本上按照由浅入深来介绍...

SQC 2019-08-05 14:59 评论0 收藏0