快捷導(dǎo)航

javascript 跨瀏覽器的事件系統(tǒng)

更新時(shí)間：2010年03月28日 13:28:11 作者：

從技術(shù)上講，javascript并沒有提供內(nèi)置的系統(tǒng)來實(shí)現(xiàn)這個(gè)非常重要的事件驅(qū)動(dòng)編程，不過得益于瀏覽器的DOM 事件模型，這缺點(diǎn)并沒有過多地暴露出來。

但實(shí)質(zhì)上javascript之父也不能主宰這一切，他支持的網(wǎng)景也沒有強(qiáng)大到讓競(jìng)爭(zhēng)對(duì)手乖乖地使用它的產(chǎn)品，微軟搞了一個(gè)JScript，死去的Macromedia 搞了一個(gè)ActionScript，還有更多，聽說這個(gè)分支挺復(fù)雜的。但借用瀏覽器內(nèi)置的DOM事件模型，第一個(gè)后果是，想使用它就必須借助某個(gè)DOM對(duì)象，window，document或元素節(jié)點(diǎn)，第二個(gè)后果是由于每個(gè)瀏覽器對(duì)DOM的支持不一，不能確保事件模型的一致，第三個(gè)是由于基于DOM對(duì)象，很容易造成循環(huán)引用。微軟打贏第一次瀏覽器戰(zhàn)爭(zhēng)后，就基本沒有更新其DOM模型了，與不斷更新向w3c，ecma等標(biāo)準(zhǔn)靠近的“標(biāo)準(zhǔn)瀏覽器”分成兩大陣營(yíng)。但標(biāo)準(zhǔn)瀏覽器內(nèi)也不是磐石一塊，如FF就不支持mousewheel而是DOMMouseScroll，opera的contextmenu 是不可控的。我們需要自己實(shí)現(xiàn)一下。眼下，雙主都實(shí)現(xiàn)DOM2的事件模型，微軟的是attachEvent為首，標(biāo)準(zhǔn)的是addeventListener，允許同一個(gè)元素可以綁定多個(gè)同類型的事件回調(diào)函數(shù)。網(wǎng)上許多addEvent函數(shù)都是用它們做成的，但也不可靠，首先，IE的回調(diào)函數(shù)沒有強(qiáng)制綁定事件對(duì)象，而標(biāo)準(zhǔn)瀏覽器是強(qiáng)舞曲第一個(gè)參數(shù)即為事件對(duì)象，盡管我們可以用call函數(shù)實(shí)現(xiàn)強(qiáng)制綁定，但I(xiàn)E的事件對(duì)象與標(biāo)準(zhǔn)的也不一樣，這里有許多工作要做。另一個(gè)，就是回調(diào)函數(shù)的執(zhí)行順序問題，IE是無規(guī)則的，標(biāo)準(zhǔn)是按綁定的先后順序執(zhí)行。因此，這兩個(gè)函數(shù)也被否定。我打算用最原始的onXXXX來實(shí)現(xiàn)，綁定多個(gè)函數(shù)時(shí)，就把它們放入一個(gè)函數(shù)中，一個(gè)for循環(huán)搞定。

復(fù)制代碼代碼如下:

 
<!doctype html> 
<html lang="en"> 
<head> 
<meta charset="utf-8" /> 
<meta content="IE=8" http-equiv="X-UA-Compatible"/> 
<title>Event系統(tǒng) 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 對(duì)象中某個(gè)元素的第一個(gè)匹配項(xiàng)。 
Array.prototype.remove= function (item) { 
var index = this.indexOf(item); 
if (index !== -1) return this.removeAt(index); 
return null; 
}; 
//移除 Array 對(duì)象中指定位置的元素。 
Array.prototype.removeAt= function (index) { 
return this.splice(index, 1) 
}; 
dom.attachEvent = function(el, type, handler) { 
// 在每個(gè)元素上設(shè)置一個(gè)Object類型的私定義屬性events 
if (!el.events) el.events = {}; 
// 這個(gè)對(duì)象有許多鍵為事件類型，值為函數(shù)數(shù)組的屬性 
var handlers = el.events[type]; 
if (!handlers) { 
handlers = el.events[type] = []; 
// 如果它原來就以onXXXX方式綁定了某事件，那么把它置為事件數(shù)組的第一個(gè)元素 
if (el["on" + type]) { 
handlers[0] = el["on" + type]; 
} 
} 
//添加回調(diào)函數(shù) 
handlers.push(handler) 
//以onXXXX方式綁定我們的處理函數(shù) 
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 id="target"> 
</div> 
<p id="p"></p> 
</body> 
</html> 

我們回顧一下上面的流程，這個(gè)事件系統(tǒng)其實(shí)是Dean大神的addEvent的一個(gè)改版。
設(shè)置一個(gè)作為命名空間的對(duì)象。
對(duì)Array做一些擴(kuò)展。
attachEvent 函數(shù)用于綁定事件。具體做法在需要綁定事件的對(duì)象設(shè)置一個(gè)events屬性，里面再按事件類型放置回調(diào)函數(shù)，由于有時(shí)我們可能在同一個(gè)元素上綁定2個(gè)或多個(gè)onclick事件什么的，因此它們必須是一個(gè)數(shù)組。最后用DOM0的原始方法添加一個(gè)onXXXX屬性。
detachEvent 函數(shù)用于卸載事件，就是把events上對(duì)應(yīng)類型的數(shù)組元素去掉。
handleEvent 執(zhí)行回調(diào)函數(shù)。我們以onXXXX的形式綁定了一個(gè)全局的函數(shù)，它的作用是獲得與修正事件對(duì)象，然后取得此事件類型對(duì)應(yīng)的所有回調(diào)函數(shù)，然后依次把事件對(duì)象作為它們的第一個(gè)參數(shù)再執(zhí)行它們。最后是處理一下冒泡。
fixEvent 修正事件對(duì)象?；旧暇褪亲孖E擁有標(biāo)準(zhǔn)瀏覽器的兩個(gè)方法。
對(duì)于一般應(yīng)用，它已夠用了。但如果追求完全。我們還有許多東西都要用。首先把events這個(gè)龐大的對(duì)象放到元素上是非常不妥的，不利于集中管理。二，fixEvent并不徹底，如target，pageX/Y等標(biāo)準(zhǔn)瀏覽器下的屬性，在IE中還是用不了。
首先是handleEvent 函數(shù)，現(xiàn)在是無論標(biāo)準(zhǔn)瀏覽器還是IE的事件對(duì)象都要修正，還在每次調(diào)用時(shí)為IE修正其currentTarget 值。

復(fù)制代碼代碼如下:

 
dom.handleEvent = function (event) { 
event = event || window.event 
event = dom.fixEvent(event); 
event.currentTarget = this;//修正currentTarget 
var returnValue = true; 
var handlers = this.events[event.type]; 
for(var i=0,n=handlers.length;i<n;i++){ 
if (handlers[i](event) === false) { 
returnValue = false; 
} 
} 
return returnValue; 
}; 

在我們介紹的新版fixEvent函數(shù)時(shí)，我們先隆重介紹我從jQuery剽竊過來的偽事件對(duì)象。

復(fù)制代碼代碼如下:

 
dom.oneObject = function(arr,val){ 
var result = {},value = val !== undefined ? val :1; 
for(var i=0,n=arr.length;i<n;i++) 
result[arr[i]] = value; 
return result; 
}; 
dom.mixin = function(result, source) { 
if (arguments.length === 1) { 
source = result; 
result = dom; 
} 
if (result && source ){ 
for(var key in source) 
source.hasOwnProperty(key) && (result[key] = source[key]); 
} 
if(arguments.length > 2 ){ 
var others = [].slice.call(arguments,2); 
for(var i=0,n=others.length;i<n;i++){ 
result = arguments.callee(result,others[i]); 
} 
} 
return result; 
} 
var MouseEventOne = dom.oneObject(["click","dblclick","mousedown", 
"mousemove","mouseout", "mouseover","mouseup"],"[object MouseEvent]"); 
var HTMLEventOne = dom.oneObject(["abort","blur","change","error","focus", 
"load","reset","resize","scroll","select","submit","unload"],"[object Event]"); 
var KeyboardEventOne = dom.oneObject(["keyup","keydown","keypress",], 
"[object KeyboardEvent]"); 
var EventMap = dom.mixin({},MouseEventOne,HTMLEventOne,KeyboardEventOne) 
var fn = "prototype"; 
dom.Event = function( src ) { 
if ( !this.preventDefault ) { 
return new dom.Event[fn].init( src ); 
} 
}; 
function returnFalse() { 
return false; 
} 
function returnTrue() { 
return true; 
} 
// http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html 
dom.Event[fn] = { 
init:function(src){ 
//如果傳入的是事件對(duì)象 
if ( src && src.type ) { 
this.originalEvent = src; 
this.type = src.type; 
//如果傳入的是事件類型 
} else { 
this.type = src; 
} 
this.timeStamp = new Date().valueOf(); 
this[ "expando" ] = true; 
}, 
//http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/events.html#Conformance 
toString:function(){ 
return EventMap[this.type] || "[object Event]" 
}, 
preventDefault: function() { 
this.isDefaultPrevented = returnTrue; 
var e = this.originalEvent; 
if ( !e ) { 
return; 
} 
// 如果存在preventDefault 那么就調(diào)用它 
if ( e.preventDefault ) { 
e.preventDefault(); 
} 
// 如果存在returnValue 那么就將它設(shè)為false 
e.returnValue = false; 
}, 
stopPropagation: function() { 
this.isPropagationStopped = returnTrue; 
var e = this.originalEvent; 
if ( !e ) { 
return; 
} 
// 如果存在preventDefault 那么就調(diào)用它 
if ( e.stopPropagation ) { 
e.stopPropagation(); 
} 
// 如果存在returnValue 那么就將它設(shè)為true 
e.cancelBubble = true; 
}, 
stopImmediatePropagation: function() { 
this.isImmediatePropagationStopped = returnTrue; 
this.stopPropagation(); 
}, 
isDefaultPrevented: returnFalse, 
isPropagationStopped: returnFalse, 
isImmediatePropagationStopped: returnFalse 
}; 
dom.Event[fn].init[fn] = dom.Event[fn]; 

這個(gè)構(gòu)造函數(shù)只實(shí)現(xiàn)了W3C事件模型的少許方法，那些屬性去了哪？不急，我們?cè)趂ixEvent方法中通過拷貝方式實(shí)現(xiàn)它們。為了區(qū)別原生事件對(duì)象與偽事件對(duì)象，我們?cè)谒厦嫣砑恿艘粋€(gè)expando屬性。

復(fù)制代碼代碼如下:

 
var buttonMap = { 
1:1, 
4:2, 
2:3 
} 
dom.fixEvent = function(event){ 
if ( event[ "expando" ] ) { 
return event; 
} 
var originalEvent = event 
event = dom.Event(originalEvent); 
for(var prop in originalEvent){ 
if(typeof originalEvent[prop] !== "function"){ 
event[prop] = originalEvent[prop] 
} 
} 
//如果不存在target屬性，為它添加一個(gè) 
if ( !event.target ) { 
event.target = event.srcElement || document; 
} 
//如果事件源對(duì)象為文本節(jié)點(diǎn)，則置入其父元素 
if ( event.target.nodeType === 3 ) { 
event.target = event.target.parentNode; 
} 
//如果不存在relatedTarget屬性，為它添加一個(gè) 
if ( !event.relatedTarget && event.fromElement ) { 
event.relatedTarget = event.fromElement === event.target ? event.toElement : event.fromElement; 
} 
//如果不存在pageX/Y則結(jié)合clientX/Y做一雙出來 
if ( event.pageX == null && event.clientX != null ) { 
var doc = document.documentElement, body = document.body; 
event.pageX = event.clientX + (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0); 
event.pageY = event.clientY + (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0); 
} 
// 為鍵盤事件添加which事件 
if ( !event.which && ((event.charCode || event.charCode === 0) ? event.charCode : event.keyCode) ) { 
event.which = event.charCode || event.keyCode; 
} 
// Add metaKey to non-Mac browsers (use ctrl for PC's and Meta for Macs) 
if ( !event.metaKey && event.ctrlKey ) { 
event.metaKey = event.ctrlKey; 
} 
// 判定鼠標(biāo)事件按下的是哪個(gè)鍵，1 === left; 2 === middle; 3 === right 
if ( !event.which && event.button !== undefined ) { 
event.which = buttonMap[event.button] 
} 
return event; 
} 