JavaScript之模拟事件（事件）

来源：互联网发布：买了域名之后怎么绑定编辑：程序博客网时间：2024/06/05 23:05

模拟事件

浏览器事件的相关信息有：Event对象、事件类型、事件处理程序。那么模拟出的事件也应该有这些信息。

DOM中的事件模拟

模拟事件的步骤：

第一步：通过document.createEvent()方法创建event对象。

可以在document对象上使用createEvent()方法创建event事件对象。该方法接收一个参数，表示事件类型的字符串。DOM2中字符串是以复数表示的，在DOM3中字符串是以单数表示。表示事件类型的字符串有：DOM2中表示事件类型的字符串

UIEvents：UI事件，鼠标事件与键盘事件继承于UI事件。DOM3中是UIEvents
MouseEvents：鼠标事件。DOM3中是MouseEvent
MutationEvents：变动事件
HTMLEvents：HTML事件，没有对应的DOM3级

第二步：初始化创建的event对象。使用initMouseEvent、initKeyboardEvent、initMutationEvent并加上与事件有关的信息分别初始化鼠标、键盘、变动事件对象。

与初始化事件对象有关的常见属性有：

type：表示触发事件的类型
bubble：表示是否应该冒泡，建议设置为true。
cancelable：表示是否只可以取消事件，建议设置为true。
view：表示事件视图。

第三步：使用dispatchEvent()触发模拟的事件。该方法接收一个参数，该参数就是创建的事件对象。这个方法由页面中的一个元素调用使用。

模拟鼠标事件

使用createEvent()方法并接收“MouseEvent”参数创建一个鼠标事件对象，该事件对象返回一个initMouseEvent()方法用来初始化事件对象，并传入与事件相关的参数来初始化事件对象：

type：触发事件的类型，如“click”、“dbclick”
bubble：是否应该冒泡，建议设置为true。
cancelable：表示是否可以取消事件，建议设置为true。
view：表示事件视图。设置为document.defaultView。
screenX：表示相对于屏幕X坐标的位置。
screenY：表示相对于屏幕Y坐标的位置。
clientX：表示相对于视口X坐标的位置。
clientY：表示相对于视口Y坐标的位置。
ctrlKey：表示是否按下了ctrl键，默认为false。
altKey：表示是否按下Alt键，默认为false。
shiftKey：表示是否按下shift键，默认为false。
metaKey：表示是否按下window键，默认为false。
button：表示按下了哪一个鼠标按键，默认为0表示鼠标左键。

以上这些参数与浏览器事件的鼠标事件的event对象包含的属性一一对应。前4个很重要，经常使用。

下面举例一个鼠标单击事件：

<body>  <input id="sub" type="submit" value="鼠标单击事件">  <script>     var sub = document.querySelector("#sub");          //创建事件对象     var event = document.createEvent("MouseEvents");          //初始化事件对象     event.initEvent("click", true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0, null);          //触发事件     sub.dispatchEvent(event);          document.onclick = function (e) {         console.log(e.type);         console.log(e.clientX);         console.log(e.button);     }                               </script></body>

模拟键盘事件

使用document.createEvent()方法并传入参数keyboardEvent可以创建键盘事件对象。并用initKeyEvent()方法初始化事件对象。最后使用dispatchEvent()方法触发事件。

type：触发的事件类型，如：“keydown”、"keyup"、"keypress"
bubble：是否应该冒泡，建议设置为true。
cancelable：是否可以取消事件，建议设置为true。
view：事件视图，常用document.defaultView。
key：表示按下的键码。
location：表示所按下按键在键盘上的位置。0表示主键盘，1表示左，2表示右，3表示数字键盘，4表示移动设备，5表示手柄。
repeat：表示一行中按下这个键多少次。
modifiers：表示修改键列表，如：alt ctrl shift window。

举例按住"ctrl"键的同时按下"b"键。

 <body>   <input id="sub" type="text">   <script>     var sub = document.querySelector("#sub");          //创建事件对象     var event = document.createEvent("keyboardEvent");          //初始化事件对象     event.initKeyboardEvent("keydown", true, true, document.defaultView, "b", "0", "Ctrl", 0);          //触发事件     sub.dispatchEvent(event);          document.onkeydown = function (e) {         console.log(e.type);         console.log(e.key);     }                               </script>

自定义DOM事件

创建自己的事件，调用creatEvent("CustomEvent")。返回initCustomEvent()方法。

type
bubble
cancelable
detail：对象，保存在detail属性中

<body>  <input id="sub" type="submit">  <script>     var sub = document.querySelector("#sub");     //添加事件处理程序     sub.addEventListener("myEvent", function (e) {         console.log(e.type); //myEvent         console.log(e.detail);     });          //创建事件对象     var event = document.createEvent("CustomEvent");          //初始化事件对象     event.initCustomEvent("myEvent", true, true, document.defaultView, "hello world");          //触发事件     sub.dispatchEvent(event);                             </script></body>

效果：

IE中的模拟事件

在IE中模拟事件与在DOM中模拟事件有点不同的是：使用document.createEventObject()创建事件对象，这个方法不传入参数，返回一个通用的event对象。初始化事件对象需要手工添加属性。最后使用fireEvent()方法触发事件，这个方法需要传入两个参数：事件处理程序名、event对象。

<body>  <input id="sub" type="submit">  <script>     var sub = document.querySelector("#sub");     //添加事件处理程序     sub.attachEvent("onclick", function (e) {         console.log(e.type); //myEvent         console.log(e.key);     });          //创建事件对象     var event = document.createEventObject();          //初始化事件对象     event.clientX = 0;     event.clientY = 0;     event.ctrlKey = false;     event.button = 0;     //触发事件     sub.fireEvent("onclick", event);                             </script></body>

0 0