浅谈JavaScript模拟事件和自定义事件

阳光穿透心脏的1/2处 2022-07-05 15:07 249阅读 0赞

[http://blog.csdn.net/zhouziyu2011/article/details/65628682][http_blog.csdn.net_zhouziyu2011_article_details_65628682]介绍了JavaScript中的五种为事件指定处理程序的方式。

[http://blog.csdn.net/zhouziyu2011/article/details/65634320][http_blog.csdn.net_zhouziyu2011_article_details_65634320]介绍了JavaScript的事件对象event。

下面介绍JavaScript中的模拟事件和自定义事件。

1、DOM中的事件模拟

1) DOM中的事件模拟有以下3个步骤：

步骤1：创建事件对象event

可以在document对象上使用createEvent()方法创建event对象，此方法接收一个参数，即要创建的事件类型的字符串。在DOM2级中这些字符串都使用英文复数形式，而在DOM3级中都变成了单数。这个字符串可以是以下几个字符串之一：

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

②　MouseEvents：一般化的鼠标事件，DOM3级中是MouseEvent；

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

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

步骤2：初始化事件对象

使用与事件有关的信息对其进行初始化，每种类型的event对象都有一个特殊的方法，为它传入适当的数据就可以初始化该event对象，不同类型的方法的名字也不相同，具体要取决于createEvent()中使用的参数。

步骤3：触发事件

使用dispatch()方法，此方法接收一个参数，即要触发事件的event对象。

2) 模拟鼠标事件：

使用createEvent()方法创建event对象，传入字符串“MouseEvents”，返回的对象有一个名为initMouseEvent()方法，用于指定与该鼠标事件有关的信息。

模拟按钮的单击事件：

var btn = document.getElementsByTagNames("button")[0];
    var event = document.createEvent("MouseEvents");
    event.initMouseEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, 0, null);
    btn.dispatchEvent(event);

3) 模拟键盘事件：

使用createEvent()方法创建event对象，传入字符串“KeyboardEvent”，返回的对象有一个名为initKeyboardEvent()方法。

DOM2级事件并没有专门规定键盘事件，后来的DOM3级事件才正式将其作为一种事件给出规定。IE9是目前唯一支持DOM3级键盘事件的浏览器，但其他浏览器也可以模拟键盘事件。

在使用createEvent()方法之前，需要先检测浏览器是否支持DOM3级事件。

模拟按住Shift的同时又按下A键：

var text = document.getElementsByTagNames("input")[0]; if (document.implementation.hasFeature("KeyboardEvents", 3.0) { var event = document.createEvent("KeyboardEvent"); event.initKeyboardEvent("keydown", true, true, document.defaultView, "a", 0, "Shift", 0); } text.dispatchEvent(event);

4) 模拟其他事件：

①　模拟变动事件：

使用createEvent()方法创建event对象，传入字符串“MutationEvents”，返回的对象有一个名为initMutationEvent()的方法。

var event = document.createEvent("MutationEvents"); event.initMutationEvent("DOMNodeInserted", true, false, someNode, "", "", "", 0); target.dispatchEvent(event);

②　模拟HTML事件：

使用createEvent()方法创建event对象，传入字符串“HTMLEvents”，返回的对象有一个名为initMutationEvent()的方法。

var event = document.createEvent("HTMLEvents"); event.initEvent("focus", true, false); target.dispatchEvent(event);

5) 自定义DOM事件：

DOM3级还定义了自定义事件。自定义事件不是由DOM原生触发的，目的是让开发人员创建自己的事件。

创建自定义事件，可以使用createEvent(“CustomEvent”)方法，返回的对象有一个名为initCustomEvent()的方法，接收如下4个参数：

type（字符串）：事件类型；

bubbles（布尔值）：时间是否应该冒泡；

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

detail（对象）：任意值，保存在event对象的detail属性中。

单击div会输出：

div：Hello world

document：Hello world

单击document会输出：

document：Hello world

2、IE中的事件模拟

IE中的事件模拟有以下3个步骤：

①　使用document.createEventObject()方法在IE中创建event对象，与DOM不同的是，此方法不接受参数，结果会返回一个通用的event对象。

②　为event对象手动添加所有必要的信息，没有方法来辅助添加。

③　在目标上使用fireEvent()方法，此方法接收两个参数：事件处理程序的名称和event对象。在调用fireEvent()方法时，会自动为event对象添加srcElement和type属性，其他属性则必须手动添加。

在IE中，模拟任何事件都采用相同的模式。

模拟click事件：

var btn = document.getElementsByTagNames("button")[0]; var event = document.createEventObject(); event.screenX = 100; event.screenY = 0; event.clientX = 0; event.clientY = 0; event.strlKey = false; event.altKey = false; event.shiftKey = false; Event.button = 0; btn.fireEvent("onclick", event);

模拟keypress事件：

var text = document.getElementsByTagNames("input")[0]; var event = document.createEventObject(); event.strlKey = false; event.altKey = false; event.shiftKey = false; Event.keyCode = 65; btn.fireEvent("onkeypress", event);

[http_blog.csdn.net_zhouziyu2011_article_details_65628682]: http://blog.csdn.net/zhouziyu2011/article/details/65628682
[http_blog.csdn.net_zhouziyu2011_article_details_65634320]: http://blog.csdn.net/zhouziyu2011/article/details/65634320