昨晚在《Javascript权威指南》书本中看到了“合成事件”这样的一个名词，开始怎么都不明白，看了它提供的例子，也都是糊里糊涂，不知道这样使用有什么作用，直到今天，上网几番查找，都没有讨论它的用处，都是简单介绍了createEvent，createEventObject等等方法的语法，都没有现成Demo来说明它的用途。时间从上午到了下午，最后还是回到了书本中，又重新看了一下《Javascript权威指南》中提供的例子，照着书本写例子来测试，第一次发现可以动态声明事件，类似于addEventListener和attachEvent的用途，发现的端倪，继续深入。之后继续上网查资料，发现了“模拟事件”，这个名词，哟和！！突然有些豁然开朗，对，“模拟事件”，因此就尝试在HTML元素行内声明事件，之后用createEvent和createEventObject生成新事件，在window.onload回调函数下测试，模拟成功！终于明白了它的这一点用途了，也开始想到了jQuery中的trigger函数的原理了！
下面来看看我写的一个封装的imitateEvent对象：
[javascript]
/*
elem：是DOM元素引用，将要添加模拟事件的DOM元素
eventType：需要模拟的事件的类型
handler：事件回调函数，这个函数可有可无。
*/
var imitateEvent = {};
imitateEvent.imitate = function(elem, eventType, handler){
elem = typeof elem !== "object" ? document.getElementById(elem) : elem;
//处理W3C下createEvent的第一个参数的设置，它有三种类型：Events，MouseEvents以及UIEvents
//不过UIEvents非常少用，在此就不提供模拟这些事件
//在这里声明Events和MouseEvents对象的目的是确定适用Events类型还是MouseEvents类型
var Events = {
"click": "click",
"blur": "blure",
"change": "change",
"dblclick": "dblclick",
"error": "error",
"focus": "focus",
"keypress": "keypress",
"keydown": "keydown",
"keyup": "keyup",
"load": "load",
"resize": "resize",
"scroll": "scroll",
"select": "select",
"submit": "submit",
"unload": "unload"
};
var MouseEvents = {
"mousedown": "mousedown",
"mousemove": "mousemove",
"mouseout": "mouseout",
"mouseover": "mouseover",
"mouseup": "mouseup"
};
var evt = null;
if (document.createEvent) { // W3C DOM
//通过createEvent创建一个新事件，默认是Events
evt = document.createEvent(Events[eventType] ? "Events" : MouseEvents[eventType] ? "MouseEvents" : "Events");
//初始化事件
evt.initEvent(eventType, true, false);
//分派事件
elem.dispatchEvent(evt);
//如果没有提供handler函数，则默认用一个空函数代替，下面IE中也是这样设置
elem.addEventListener(eventType, handler ? handler : function(){}, false);
} else if (document.createEventObject) { // IE
//通过createEventObject创建一个新事件
evt = document.createEventObject();
//分派事件
elem.fireEvent("on" + eventType, evt);
elem.attachEvent("on" + eventType, handler ? function(){ handler.call(elem);} : function(){});
}
}
[/javascript]
如果在DOM元素已经通过其他方式添加了事件的时候，在模拟事件对象中又提供了handler回调函数，则事件则会叠加，可能这就是所谓的“合成事件”吧。
下面是提供的Demo：
[html]
<div id="div" onclick="test();">
Click me please.
</div>
<script type="text/javascript">
//添加事件模拟，这样在window.onload的时候就调用了div标签的onclick事件
//在这里提供了handler回调函数，如果没有提供的话，就只会执行其他方式声明的事件。
imitateEvent.imitate(document.getElementById("div"), "click", function(){
alert(this.nodeName);
});
function test(){
alert("You have mouseovered me already.");
}
</script>
[/html]
上面我对于模拟事件的一点点见解，如果有错误之处，还请高手指点一二，指正错误，不胜感激！