JavaScript 事件——“模拟事件”的注意要点

BakerJ 发布于2019-08-19 17:26 / 3000人阅读

DOM中的事件模拟

三个步骤：

首先通过document.createEvent()方法创建event对象，接收一个参数，即表示要创建的事件类型的字符串：

UIEvents（DOM3中的UIEvent）鼠标和键盘事件；

MouseEvents（DOM3中的MouseEvent）鼠标事件；

MutationEvents（DOM3中的MutationEvent）变动事件；

HTMLEvents（没有DOM3中对应的事件）HTML事件；

其次在创建了event对象之后，还需要使用与事件有关的信息对其进行初始化。每种类型的event对象都有一个特殊的方法，为它传入适当的数据就可以初始化该event对象。用event.init......()此类行的方法。

最后就是触发事件。这需要使用dispatchEvent()方法，接收一个参数，即表示要触发的event对象。

模拟鼠标事件

首先创建鼠标事件对象的方法createEvent()传入MouseEvents，返回的对象的方法initMouseEvent()，接收15个信息：

type（字符串）：事件类型如“click”；

bubble（布尔值）：是否冒泡；

cancelable（布尔值）：是否可取消；

view（AbstractView）：与事件关联的视图，一般为document.defaultView；

detail（整数）：一般为0，一般只有事件处理程序使用；

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

screenY（整数）；

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

clientY（整数）；

ctrlKey（布尔值）：是否按下了Ctrl键，默认为false；

11. altKey（布尔值）；
12. shiftKey（布尔值）；
13. metaKey（布尔值）；
14. button（整数）：表示按下了哪个鼠标键，默认为0；
15. relatedTarget（对象）：表示与事件相关的对象。一般只有在模拟mouseover与mouseout时使用。

最后记得把event对象传给dispatchEvent()方法。

如模拟按钮的单击事件：

//模拟click事件
//获取btn
var btn = document.querySelector("#btn");
//创建event
var event = document.createEvent("MouseEvents");
//初始化event
event.initMouseEvent("click",true,true,document.defaultView,0,0,0,0,0,false,false,false,false,0,null);
//click事件绑定事件处理程序
btn.onclick = function () {
    console.log("hello");
}
//触发事件
btn.dispatchEvent(event); //hello
//取消引用
btn.onclick = null;

另外，建议使用构造函数"MouseEvent"：

var evt = new MouseEvent("click", {
    bubbles: true,
    cancelable: true,
    view: window
});

模拟键盘事件

首先创建鼠标事件对象的方法createEvent()传入KeyboardEvents，返回的对象的方法initKeyEvent()，接收下面参数：

type（字符串）：要触发的事件类型，“keydown”等；

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

cancelable（布尔值）：是否可以取消；

view（AbstractView）：与事件关联的视图。一般为document.defaultView；

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

location（整数）：表示按下哪里的键。0为主键盘；1为左；2为右；3为数字键盘；4为虚拟键盘；5为手柄；

modifiers（字符串）：空格分隔的修改键列表，如“shift”；

repeat（整数）：在一行中按下了多少次这个键；

由于DOM3级不提倡使用keypress事件，因此只能利用这种技术来模拟keydown和keyup事件：

var textbox = document.querySelector("#myTextBox");
var event = document.createEvent("KeyboardEvent");
event.initKeyboardEvent("keydown",true,true,document.defaultView,"a",0,"Shift",0);

textbox.dispatchEvent(event);

在Firefox中，调用createEvent()并传入“KeyEvents”就可以创建一个键盘事件，返回的事件对象会包含一个initKeyEvent()方法，接收参数：

type；

bubbles；

cancelable；

view；

ctrlKey；

altKey；

shiftKey；

metaKey；

keyCode；

charCode；

另外，建议使用构造函数“KeyboardEvent”

模拟其他事件

浏览器中很少使用变动事件和HTML事件；要模拟变动事件，可以用createEvent("MutationEvent");initMutationEvent();要模拟HTML事件，可以用createEvent("HTMLEvents");initEvent();

自定义DOM事件

用createEvent("CustomEvent");initCustomEvent()方法，接收参数：type；bubbles；cancelable；detail；

var btn = document.querySelector("#btn");
var evt = document.createEvent("CustomEvent");
evt.initCustomEvent("click",true,true,"Hello there");

btn.onclick = function () {
    console.log(event.detail);
};

btn.dispatchEvent(evt);

IE中的事件模拟

调用document.createEventObject()方法，创建event对象，并指定必要的信息，最后在目标上调用fireEvent()方法，接收两个参数：事件处理程序名称和event对象：

var btn = document.querySelector("#btn");
var evt = document.createEventObject();
evt.screenX = 0;
evt.screenY = 0;
evt.clientX = 0;
evt.clientY = 0;
evt.ctrlKey = false;
evt.altKey = false;
evt.shiftKey = false;
evt.button = 0;

btn.fireEvent("onclick",evt);

私有云混合云 java怎么模拟事件 javascript的事件云主机的要点深度学习的要点

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

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

使用 javascript 替换 jQuery

摘要：使用替换曾风靡一个时代，大大降低了前端开发的门槛，丰富的插件也是前端开发者得心应手的武器库，但是，这个时代终于要落幕了。选取元素选择器查询常用的属性选择器都可以使用或替代。返回第一个匹配的返回所有匹配的组成的。最后使用方法触发对象。使用 javascript 替换 jQuery jQuery 曾风靡一个时代，大大降低了前端开发的门槛，丰富的插件也是前端开发者得心应手的武器库，但是，这...

zhangyucha0 2019-08-23 12:12 评论0 收藏0
【重温基础】20.事件

摘要：本文是重温基础系列文章的第二十篇。事件捕获为截获事件提供机会，然后实际的目标接收到事件，最后事件冒泡，对事件作出响应。事件处理事件处理，即响应某个事件。包括导致事件的元素事件类型等其他信息。本文是重温基础系列文章的第二十篇。这是第三个基础系列的第一篇，欢迎持续关注呀！重温基础系列的【初级】和【中级】的文章，已经统一整理到我的【Cute-JavaScript】的Java...

Blackjun 2019-08-26 13:28 评论0 收藏0
JavaScript 事件——“内存和性能”的注意要点

摘要：事件委托对事件处理程序过多的问题的解决方案就是事件委托。最适合采用事件委托技术的事件包括和。移除事件处理程序通常造成空事件处理程序的原因有可能是操作等或使用等。以防止部分浏览器出现内存问题。事件委托对事件处理程序过多的问题的解决方案就是事件委托。例如，click事件会一直冒泡到document层次。也就是说，我们可以为整个页面指定一个onclick事件处理程序，而不必给每个可单击的...

YPHP 2019-08-22 11:00 评论0 收藏0
JavaScript Ajax与Comet——“进度事件”的注意要点

摘要：有以下个进度事件在接收到响应数据的第一个字节时触发。在接收响应数据期间持续的触发在请求发生错误时触发在因调用方法而终止连接时触发在接收到完整的响应数据时触发在通信完成或者触发，，事件后触发。有以下6个进度事件： loadstart: 在接收到响应数据的第一个字节时触发。 progress: 在接收响应数据期间持续的触发 error: 在请求发生错误时触发 abort: 在因调用ab...

ad6623 2019-08-19 17:40 评论0 收藏0
JavaScript 事件——“事件流和事件处理程序”的注意要点

摘要：事件流级事件规定的事件流包括三个阶段事件捕获阶段处于目标阶段和事件冒泡阶段。事件处理程序的名字以开头，如等。如使用级方法指定的事件处理程序被认为是元素的方法。事件流事件流描述的是从页面中接收事件的顺序。IE的事件流是事件冒泡流，而Netscape Communicator的事件流是事件捕获流。事件冒泡即事件开始时由最具体的元素接收，然后逐级向上传播到较为不具体的节点。如： ...

Amio 2019-08-19 17:22 评论0 收藏0