Notes:DOM的事件模拟

首先使用document对象的createEvent方法创建一个事件对象，然后初始化该事件对象，接着使用支持事件DOM节点的dispatchEvent方法触发事件。

DOM2级事件和DOM3级事件有些不同，如下图所示，DOM2传给createEvent方法的字符串为英文复数，而DOM3则为单数。

下面为一个模拟点击事件的代码

show.addEventListener('click',function(e){
    console.log('click');
},!1);
show.addEventListener('keydown',function(e){
    console.log('keydown');
},!1)
var event = document.createEvent('MouseEvents');
event.initMouseEvent('click',!0,!0,document.defaultView);
show.dispatchEvent(event);


var keyEvent = document.createEvent('KeyboardEvent');
keyEvent.initKeyboardEvent('keydown',!0,!0,document.defaultView);
show.dispatchEvent(keyEvent);

也可以使用各种事件的构造函数来做，例如使用CustomEvent构造函数自定义事件，如下所示

var customEvent = new CustomEvent('test',{detail:"hello world"});
show.dispatchEvent(customEvent);

在ie9及以上不能使用构造函数来做，但是可以通过pollfill来做，如下所示

(function(){
    function CustomEvent(type,optional){
        optional = optional || { bubbles: false, cancelable: false, detail: undefined };
        var evt = document.createEvent('CustomEvent');
        evt.initCustomEvent(type,optional);
        return evt;
    }
    CustomEvent.prototype = window.Event.prototype;
    window.CustomEvent = CustomEvent;
})();

 IE8及以下模拟事件

同样，首先创建一个event对象（document.createEventObject），然后初始化该对象，再触发该事件(fireEvent)，下面为一个点击事件的例子

var event = document.createEventObject();
//初始化事件对象
event.screenX = 100;
event.screenY = 0;
event.clientX = 0;
event.clientY = 0;
event.ctrlKey = false;
event.altKey = false;
show.fireEvent('onclick',event);