讀jQuery之八 包裝事件對(duì)象
獲取事件源對(duì)象,IE用 srcElement ,標(biāo)準(zhǔn)瀏覽器則用 target 諸如此類。
jQuery 對(duì)原生事件對(duì)象的修復(fù)和包裝主要使用 jQuery.Event 類和 jQuery.event.fix 方法。
jQuery.Event = function( src ) {
// Allow instantiation without the 'new' keyword
if ( !this.preventDefault ) {
return new jQuery.Event( src );
}
// Event object
if ( src && src.type ) {
this.originalEvent = src;
this.type = src.type;
// Events bubbling up the document may have been marked as prevented
// by a handler lower down the tree; reflect the correct value.
this.isDefaultPrevented = (src.defaultPrevented || src.returnValue === false ||
src.getPreventDefault && src.getPreventDefault()) ? returnTrue : returnFalse;
// Event type
} else {
this.type = src;
}
// timeStamp is buggy for some events on Firefox(#3843)
// So we won't rely on the native value
this.timeStamp = jQuery.now();
// Mark it as fixed
this[ jQuery.expando ] = true;
};
function returnFalse() {
return false;
}
function returnTrue() {
return true;
}
// jQuery.Event is based on DOM3 Events as specified by the ECMAScript Language Binding
// http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html
jQuery.Event.prototype = {
preventDefault: function() {
this.isDefaultPrevented = returnTrue;
var e = this.originalEvent;
if ( !e ) {
return;
}
// if preventDefault exists run it on the original event
if ( e.preventDefault ) {
e.preventDefault();
// otherwise set the returnValue property of the original event to false (IE)
} else {
e.returnValue = false;
}
},
stopPropagation: function() {
this.isPropagationStopped = returnTrue;
var e = this.originalEvent;
if ( !e ) {
return;
}
// if stopPropagation exists run it on the original event
if ( e.stopPropagation ) {
e.stopPropagation();
}
// otherwise set the cancelBubble property of the original event to true (IE)
e.cancelBubble = true;
},
stopImmediatePropagation: function() {
this.isImmediatePropagationStopped = returnTrue;
this.stopPropagation();
},
isDefaultPrevented: returnFalse,
isPropagationStopped: returnFalse,
isImmediatePropagationStopped: returnFalse
};
jQuery.Event 類主要做了以下工作
1,擴(kuò)充了 originalEvent 屬性,該屬性暫存了原生事件對(duì)象。
2,修復(fù)了 timeStamp ,該屬性IE6/7/8不支持,其它支持的各個(gè)瀏覽器中返回值也不同。
3,阻止DOM元素默認(rèn)行為統(tǒng)一采用 preventDefault
4,停止事件冒泡統(tǒng)一采用 stopPropagation
5,實(shí)現(xiàn)或擴(kuò)充了 DOM3事件 的幾個(gè)方法:stopImmediatePropagation、isDefaultPrevented、isPropagationStopped、isImmediatePropagationStopped
此外,jQuery.Event的 寫(xiě)類方式 也較獨(dú)特。它 使用隱藏的new創(chuàng)建對(duì)象 。
jQuery.event.fix方法 如下
fix: function( event ) {
if ( event[ jQuery.expando ] ) {
return event;
}
// store a copy of the original event object
// and "clone" to set read-only properties
var originalEvent = event;
event = jQuery.Event( originalEvent );
for ( var i = this.props.length, prop; i; ) {
prop = this.props[ --i ];
event[ prop ] = originalEvent[ prop ];
}
// Fix target property, if necessary
if ( !event.target ) {
// Fixes #1925 where srcElement might not be defined either
event.target = event.srcElement || document;
}
// check if target is a textnode (safari)
if ( event.target.nodeType === 3 ) {
event.target = event.target.parentNode;
}
// Add relatedTarget, if necessary
if ( !event.relatedTarget && event.fromElement ) {
event.relatedTarget = event.fromElement === event.target ? event.toElement : event.fromElement;
}
// Calculate pageX/Y if missing and clientX/Y available
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);
}
// Add which for key events
if ( event.which == null && (event.charCode != null || event.keyCode != null) ) {
event.which = event.charCode != null ? 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;
}
// Add which for click: 1 === left; 2 === middle; 3 === right
// Note: button is not normalized, so don't use it
if ( !event.which && event.button !== undefined ) {
event.which = (event.button & 1 ? 1 : ( event.button & 2 ? 3 : ( event.button & 4 ? 2 : 0 ) ));
}
return event;
},
它主要做了以下工作
1,event = jQuery.Event( originalEvent ); 該句創(chuàng)建了一個(gè)jQuery.Event類的實(shí)例對(duì)象,該對(duì)象修復(fù)及擴(kuò)充上面剛剛提到了。
2, 一個(gè)循環(huán)將原生事件對(duì)象的所有屬性拷貝給 1 中的event對(duì)象。
for ( var i = this.props.length, prop; i; ) {
prop = this.props[ --i ];
event[ prop ] = originalEvent[ prop ];
}
3, 統(tǒng)一事件源對(duì)象為 target 。
4, 統(tǒng)一事件相關(guān)對(duì)象為 relativeTarget 。
5, 擴(kuò)充了pageX , pageY ,這兩個(gè)屬性首次在Firefox中引入的。不支持該屬性的瀏覽器使用clientX/Y計(jì)算得到。
6, 擴(kuò)充了 which ,使用它獲取鍵盤按鍵值(keyCode)。這個(gè)屬性也是在Firefox引入的。
7, 修復(fù)了metaKey。
8, 擴(kuò)充了which,使用它獲取鼠標(biāo)按鍵值
細(xì)心的人可能注意到了,jQuery獲取鍵盤按鍵值和鼠標(biāo)按鍵值都是采用which。它沒(méi)有向其它屬性一樣去兼容W3C已有標(biāo)準(zhǔn) (button )。這一點(diǎn)我在 讀jQuery之七 及 各瀏覽器中鼠標(biāo)按鍵值的差異 做了詳細(xì)分析。
最后,給zChain.js添加包裝事件對(duì)象的相關(guān)代碼。
zChain-0.7.1.js
相關(guān)文章
jQuery控制文本框只能輸入數(shù)字和字母及使用方法
這篇文章主要介紹了jQuery控制文本框只能輸入數(shù)字和字母及使用方法的相關(guān)資料,非常不錯(cuò)而且實(shí)用性也很高,需要的朋友可以參考下2016-05-05
jQuery使用動(dòng)態(tài)渲染表單功能完成ajax文件下載
使用ajax實(shí)現(xiàn)文件下載,方便,快捷,時(shí)尚,多么有挑戰(zhàn)的一個(gè)功能,首先獲取url和data然后把參數(shù)組裝成form的input再利用request發(fā)送請(qǐng)求,也就是動(dòng)態(tài)渲染表單,提交表單后再刪除,本例將實(shí)現(xiàn)文件下載功能,感興趣的朋友可以聊解下2013-01-01
jQuery 通過(guò)事件委派一次綁定多種事件,以減少事件冗余
jQuery的最大特色之一就是方法連綴寫(xiě)法,這樣的書(shū)寫(xiě)方式使得閱讀起來(lái)更加方便。2010-06-06
基于jquery實(shí)現(xiàn)ajax無(wú)刷新評(píng)論
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)ajax無(wú)刷新評(píng)論的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考2016-05-05
jQuery實(shí)現(xiàn)單擊按鈕遮罩彈出對(duì)話框(仿天貓的刪除對(duì)話框)
單擊刪除按鈕或者登陸按鈕后,彈出對(duì)話框問(wèn)你是否刪除或者彈出一個(gè)登陸對(duì)話框,本文使用jquery來(lái)實(shí)現(xiàn)這種效果,需要的朋友可以參考下2014-04-04
jQuery實(shí)現(xiàn)可拖拽3D萬(wàn)花筒旋轉(zhuǎn)特效
本文主要介紹了使用了CSS3立體效果的強(qiáng)大特效,本特效使用jQuery跟CSS3 transform來(lái)實(shí)現(xiàn)在用戶鼠標(biāo)按下拖動(dòng)時(shí),環(huán)形圖片墻可以跟隨鼠標(biāo)進(jìn)行3D旋轉(zhuǎn)動(dòng)畫(huà)。下面跟著小編一起來(lái)看下吧2017-01-01
jquery+css3實(shí)現(xiàn)的經(jīng)典彈出層效果示例
這篇文章主要介紹了jquery+css3實(shí)現(xiàn)的經(jīng)典彈出層效果,結(jié)合實(shí)例形式分析了jquery+css3實(shí)現(xiàn)彈出層具體原理、步驟與相關(guān)操作技巧,需要的朋友可以參考下2020-05-05

