转载

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

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

原文 http://segmentfault.com/a/1190000004339133

正文到此结束