javascript 跨瀏覽器的事件系統

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

但實質上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 id="target">
</div>
<p id="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 值。複製代碼代碼如下: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函數時，我們先隆重介紹我從jQuery剽竊過來的偽事件對象。複製代碼代碼如下: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){
//如果傳入的是事件對象
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 那麼就調用它
if ( e.preventDefault ) {
e.preventDefault();
}
// 如果存在returnValue 那麼就將它設為false
e.returnValue = false;
},
stopPropagation: function() {
this.isPropagationStopped = returnTrue;
var e = this.originalEvent;
if ( !e ) {
return;
}
// 如果存在preventDefault 那麼就調用它
if ( e.stopPropagation ) {
e.stopPropagation();
}
// 如果存在returnValue 那麼就將它設為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];

這個建構函式只實現了W3C事件模型的少許方法，那些屬性去了哪？不急，我們在fixEvent方法中通過拷貝方式實現它們。為了區別原生事件對象與偽事件對象，我們在它上面添加了一個expando屬性。複製代碼代碼如下: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屬性，為它添加一個
if ( !event.target ) {
event.target = event.srcElement || document;
}
//如果事件來源對象為文本節點，則置入其父元素
if ( event.target.nodeType === 3 ) {
event.target = event.target.parentNode;
}
//如果不存在relatedTarget屬性，為它添加一個
if ( !event.relatedTarget && event.fromElement ) {
event.relatedTarget = event.fromElement === event.target ? event.toElement : event.fromElement;
}
//如果不存在pageX/Y則結合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;
}
// 判定滑鼠事件按下的是哪個鍵，1 === left; 2 === middle; 3 === right
if ( !event.which && event.button !== undefined ) {
event.which = buttonMap[event.button]
}
return event;
}

毫不猶豫地抄jQuery的方法，因為在所有類庫中，jQuery的方法是最好提取的。
現在我們基本解決了文章中段提出的兩個問題中的其中一個。要解決第一個我們就需要引入緩衝系統了。這個留在下一部分講。 lang="en">

顯示滑鼠位置

請按下鍵盤的鍵

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More