但实质上javascript之父也不能主宰这一切，他支持的网景也没有强大到让竞争对手乖乖地使用它的产品，微软搞了一个JScript，死去的Macromedia 搞了一个ActionScript，还有更多，听说这个分支挺复杂的。但借用浏览器内置的DOM事件模型，第一个后果是，想使用它就必须借助某个DOM对象，window，document或元素节点，第二个后果是由于每个浏览器对DOM的支持不一，不能确保事件模型的一致，第三个是由于基于DOM对象，很容易造成循环引用。微软打赢第一次浏览器战争后，就基本没有更新其DOM模型了，与不断更新向w3c，ecma等标准靠近的“标准浏览器”分成两大阵营。但标准浏览器内也不是磐石一块，如FF就不支持mousewheel而是DOMMouseScroll，opera的contextmenu 是不可控的。我们需要自己实现一下。眼下，双主都实现DOM2的事件模型，微软的是attachEvent为首，标准的是addeventListener，允许同一个元素可以绑定多个同类型的事件回调函数。网上许多addEvent函数都是用它们做成的，但也不可靠，首先，IE的回调函数没有强制绑定事件对象，而标准浏览器是强舞曲第一个参数即为事件对象，尽管我们可以用call函数实现强制绑定，但IE的事件对象与标准的也不一样，这里有许多工作要做。另一个，就是回调函数的执行顺序问题，IE是无规则的，标准是按绑定的先后顺序执行。因此，这两个函数也被否定。我打算用最原始的onXXXX来实现，绑定多个函数时，就把它们放入一个函数中，一个for循环搞定。
复制代码 代码如下:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="IE=8" http-equiv="X-UA-Compatible"/>
<title>Event系统 by 司徒正美</title>
<style type="text/css">
#target{
width:400px;
height:100px;
background:blue;
}
</style>
<script type="text/javascript">
var dom = {};
Array.prototype.indexOf = function (el, index) {
var n = this.length>>>0,
i = index == null ? 0 : index < 0 ? Math.max(0, n + index) : index;
for (; i < n; i++)
if (i in this && this[i] === el) return i;
return -1;
};
//http://msdn.microsoft.com/zh-cn/library/bb383786.aspx
//移除 Array 对象中某个元素的第一个匹配项。
Array.prototype.remove= function (item) {
var index = this.indexOf(item);
if (index !== -1) return this.removeAt(index);
return null;
};
//移除 Array 对象中指定位置的元素。
Array.prototype.removeAt= function (index) {
return this.splice(index, 1)
};
dom.attachEvent = function(el, type, handler) {
// 在每个元素上设置一个Object类型的私定义属性events
if (!el.events) el.events = {};
// 这个对象有许多键为事件类型，值为函数数组的属性
var handlers = el.events[type];
if (!handlers) {
handlers = el.events[type] = [];
// 如果它原来就以onXXXX方式绑定了某事件，那么把它置为事件数组的第一个元素
if (el["on" + type]) {
handlers[0] = el["on" + type];
}
}
//添加回调函数
handlers.push(handler)
//以onXXXX方式绑定我们的处理函数
el["on" + type] = dom.handleEvent;
};
dom.detachEvent = function(el, type, handler) {
if (el.events && el.events[type]) {
el.events[type].remove(handler)
}
}
dom.handleEvent = function (event) {
var returnValue = true;
// grab the event object (IE uses a global event object)
event = event || fixEvent(((this.ownerDocument || this.document || this).parentWindow || window).event);
// get a reference to the hash table of event handlers
var handlers = this.events[event.type];
// execute each event handler
for(var i=0,n=handlers.length;i<n;i++){
if (handlers[i](event) === false) {
returnValue = false;
}
}
return returnValue;
};
function fixEvent(event) {
// add W3C standard event methods
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;
};
fixEvent.preventDefault = function() {
this.returnValue = false;
};
fixEvent.stopPropagation = function() {
this.cancelBubble = true;
};
var $ = function(id){
return document.getElementById(id)
}
window.onload = function(){
var a = function(e){
$("p").innerHTML = e.clientX +" "+e.clientY
}
dom.attachEvent($("target"),"mousemove",a);
setTimeout(function(){
dom.detachEvent($("target"),"mousemove",a);
},10*1000)
}
</script>
</head>
<body>
<div>
</div>
<p></p>
</body>
</html>
我们回顾一下上面的流程，这个事件系统其实是Dean大神的addEvent的一个改版。
设置一个作为命名空间的对象。
对Array做一些扩展。
attachEvent 函数用于绑定事件。具体做法在需要绑定事件的对象设置一个events属性，里面再按事件类型放置回调函数，由于有时我们可能在同一个元素上绑定2个或多个onclick事件什么的，因此它们必须是一个数组。最后用DOM0的原始方法添加一个onXXXX属性。
detachEvent 函数用于卸载事件，就是把events上对应类型的数组元素去掉。
handleEvent 执行回调函数。我们以onXXXX的形式绑定了一个全局的函数，它的作用是获得与修正事件对象，然后取得此事件类型对应的所有回调函数，然后依次把事件对象作为它们的第一个参数再执行它们。最后是处理一下冒泡。
fixEvent 修正事件对象。基本上就是让IE拥有标准浏览器的两个方法。
对于一般应用，它已够用了。但如果追求完全。我们还有许多东西都要用。首先把events这个庞大的对象放到元素上是非常不妥的，不利于集中管理。二，fixEvent并不彻底，如target，pageX/Y等标准浏览器下的属性，在IE中还是用不了。
首先是handleEvent 函数，现在是无论标准浏览器还是IE的事件对象都要修正，还在每次调用时为IE修正其currentTarget 值。
复制代码 代码如下: