Javascript高级编程学习笔记（72）—— 模拟事件（2）IE事件模拟

IE中的事件模拟

低版本的IE浏览器作为前端开发的一股清流，想避过都不行

虽然低版本IE正在逐步被市场淘汰，不得不承认IE8以下的浏览器依然占了不小的份额

 

所以这里大概介绍IE8以下的低版本IE中的事件模拟，如何实现事件模拟

 

首先从实现思路上来说，与DOM标准中的事件模拟并没有太大的差异

分为以下几步：

1. 创建 event 对象
2. 为event 对象指定信息
3. 使用该对象来触发事件

 

只是实现的方法有所差异

在IE中创建 event 对象需使用 document.createEventObject()  方法

与DOM不同的地方在于，该方法不接受参数，不管你需要返回一个什么样类型的事件该方法都会返回一个通用的事件对象

痛苦的地方在于，我们必须手动地为创建的 event 添加所有的事件信息，也就是初始化事件对象这一步骤需要我们手工完成

在触发事件的方式上，我们需要在目标元素上调用 fireEvent 方法，该方法接收两个参数，1.事件处理程序，2.event对象

该方法会为我们添加 srcElement 和 type 属性，其余的属性则需要我们手工添加

 

以模拟 click 事件为例：

var btn = document.getElementById("myBtn");

//创建事件对象
var event = document.createEventObject();

//初始化事件对象
event.screenX = 100;
event.screenY = 100;
event.clientX = 100;
event.clientY = 100;
event.ctrlKey  = false;
event.altKey = false;
event.shiftKey = false;
event.button = 0;
event.bubble = true;
event.cancelable = true;
...


//触发事件
btn.fireEvent("onclick",event);

 

由于IE返回的是一个通用的 event 事件对象，所以就算我们在初始化事件对象时指定了IE不支持的属性也没有关系