jQuery パート 8 を読む: イベント Object_jquery のパッケージ化

たとえば、イベントのバブリングを停止するには、IE は cancelBubble を使用し、標準ブラウザは stopPropagation を使用します。
イベント ソース オブジェクトを取得するには、IE では srcElement を使用し、標準ブラウザでは target などを使用します。
jQuery は主に jQuery.Event クラスと jQuery.event.fix メソッドを使用して、ネイティブ イベント オブジェクトを修復およびラップします。

コードをコピー コードは次のとおりです。

jQuery.Event = function( src ) {
// 'new' キーワードなしでインスタンス化を許可します
if ( !this.preventDefault ) {
return new jQuery.Event( src )
}
// イベント オブジェクト
if ( src && src.type ) {
this.originalEvent = src;
this.type = src.type;
// ドキュメント内で発生するイベントは禁止されている可能性があります
//
this.isDefaultPrevented = (src.defaultPrevented || src.returnValue === false ||
src.getPreventDefault && src.getPreventDefault()) ? : returnFalse;
// イベント タイプ
} else {
this.type = src;
}
// Firefox の一部のイベントではタイムスタンプがバグります (#3843)
/ / したがって、ネイティブ値には依存しません
this.timeStamp = jQuery.now();
// 固定としてマークします
this[ jQuery.expando ] = true;
function returnFalse() {
return false;
}
function returnTrue() {
return true;
}
// jQuery.Event は DOM3 イベントに基づいています。 ECMAScript 言語バインディングで指定
// http://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html
jQuery.Event .prototype = {
preventDefault: function() {
this.isDefaultPrevented = returnTrue;
if ( !e ) {
}
//PreventDefault が存在する場合は、元のイベントで実行します。
if ( e.preventDefault ) {
e.preventDefault();
// それ以外の場合は、元のイベントの returnValue プロパティを false に設定します ( IE)
} else {
e.returnValue = false;
}
},
stopPropagation: function() {
this.isPropagationStopped = returnTrue; this.originalEvent ;
if ( !e ) {
return;
}
// stopPropagation が存在する場合は、元のイベントで実行します
if ( e.stopPropagation ) {
e .stopPropagation( );
}
// それ以外の場合は、元のイベントの cancelBubble プロパティを true に設定します (IE)
e.cancelBubble = true;
stopImmediatePropagation: function() {
this.isImmediatePropagationStopped = returnTrue;
this.stopPropagation();
}、
isDefaultPrevented: returnFalse、
isPropagationStopped: returnFalse
}; 🎜>


jQuery.Event クラスは主に次の作業を行います

1、originalEvent 属性が展開され、ネイティブ イベント オブジェクトが一時的に保存されます。
2、
timeStamp

が修正されました。この属性は IE6/7/8 ではサポートされておらず、サポートされている他のブラウザーでは戻り値が異なります。
3. DOM 要素のデフォルトの動作を防ぐには、preventDefault

4 が使用されます。

DOM3 イベント

のいくつかのメソッドが実装または拡張されます。または展開: stopImmediatePropagation、isDefaultPrevented、isPropagationStopped、isImmediatePropagationStopped
さらに、jQuery.Event のクラスの書き方も独特です。 hidden new
を使用してオブジェクトを作成します。
jQuery.event.fix メソッドは次のとおりです


コードをコピーします
コードは次のとおりです:

修正: function(event) {
if (event[ jQuery.expando ] ) {
return イベント;
}
// 元のイベント オブジェクトのコピーを保存します
// そして、読み取り専用プロパティを設定するために「クローン」を作成します
varoriginalEvent =event;
event = jQuery.Event(originalEvent);
for ( var i = this.props.length, prop; i; ) {
prop = this.props[ --i ];
イベント[ prop ] = オリジナルイベント[ prop ];
}
// 必要に応じて、ターゲット プロパティを修正します。
if ( !event.target ) {
// srcElement が定義されていない可能性がある #1925 を修正します。
event.target = events. src要素 ||書類;
}
// ターゲットがテキストノード (safari) かどうかを確認します
if (event.target.nodeType === 3 ) {
event.target =event.target.parentNode;
}
// 必要に応じて、relationalTarget を追加します。
if ( !event.popularTarget &&event.fromElement ) {
event.popularTarget =event.fromElement ===event.target ?イベント.toElement : イベント.fromElement;
}
// 見つからない場合は pageX/Y を計算し、 clientX/Y が利用可能な場合は
if (event.pageX == null &&event.clientX != null ) {
var doc = document.documentElement,
body = document.body;
event.pageX = events.clientX (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
event.pageY = events.clientY (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
}
// キーイベントのどれを追加します
if (event.that == null && (event.charCode != null ||event.keyCode != null) ) {
event.that = イベント.charCode != null ?イベント.charCode : イベント.keyCode;
}
// Mac 以外のブラウザにメタキーを追加します (PC の場合は Ctrl を使用し、Mac の場合は Meta を使用します)
if ( !event.metaKey &&event.ctrlKey ) {
event.metaKey =even. Ctrlキー;
}
// クリック用に次の値を追加します: 1 === left; 2 === 真ん中; 3 === right
// 注: ボタンは正規化されていないため、使用しないでください
if ( !event.that &&event.button !== unknown ) {
event.that = (イベント.ボタン & 1 ? 1 : ( イベント.ボタン & 2 ? 3 : ( イベント.ボタン & 4 ? 2 : 0 ));
}
リターンイベント;
},

它主做了以下工作
1，event = jQuery.Event(originalEvent ); この句は、jQuery.Event クラスのサンプル オブジェクトを作成します。このオブジェクトの修正は、上部のプロパティで説明されています。 >

复制代 代码如下: for ( var i = this.props.length, prop; i; ) {

prop = this.props[ --i ];

イベント[ prop ] = オリジナルイベント[ prop ];
}


3、イベント関連オブジェクトは target です。
4、イベント関連オブジェクトはrelativeTarget です。

5、pageX 、 pageY 、この 2 つのプロパティを初めて満たしますこのプロパティをサポートしていないブラウザは、clientX/Y によって計算されます。
8、どれを使用するか、その取得マウス ボックスの値を使用します。
心ある人はおそらく、jQuery の取得ボックス ボックスの値とマウス ボックスの値の両方がどちらを使用しているかを知っています。これは、jQuery の 7 つおよび各ブラウザーのマウスマーク値の差分を分析したものです。
最後に、zChain.js でパッケージ イベント オブジェクトの関連コードを追加します。

zChain-0.7.1.js