ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery 13 を読む。イベントの追加と削除のコア メソッド events_jquery

jQuery 13 を読む。イベントの追加と削除のコア メソッド events_jquery

WBOY
WBOYオリジナル
2016-05-16 18:03:19886ブラウズ

jQuery のイベント モジュールはそのデータ ストア (jQuery.data) に大きく依存しており、コード内の dataManager オブジェクトがそれに対応していることがわかります。
ここではバインドメソッドとバインド解除メソッドのみを提供します。
1、イベント名前空間 (event namespace)
2、イベント委任 (event delegation)
3、dom Ready などの特別なイベントは含まれません
インターフェースは次のとおりです:

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

E.bind(el, 'click', fn);
E.bind(el, 'click', fn, data);
E.unbind(el, 'click', fn); >E.unbind(el) ;



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

/**
* jQuery からのイベント
* 2011-06-20 snandy
*
* イベントの管理に使用される多数のヘルパー関数。
* このコードの背後にあるアイデアの多くは、jQuery ライブラリ (1.6.2) から生まれました。
*
* 例
*
* E.bind(el, 'click', fn);
*
* E.bind(el, 'click', fn, data);
*
* E.unbind(el, 'click', fn);
*
* E.unbind(el, 'click');
*
* E.unbind(el);
*
*/
E = function( window ) {
var uuid = 0,
globalCache = {},
doc = window.document,
w3c = !!doc.addEventListener,
expando = 'snandy' ('' Math.random()).replace(/D/g, ''),
addListener = w3c ?
function(el, type, fn) { el.addEventListener(type, fn, false); } :
function(el, type, fn) { el.attachEvent('on' type, fn); },
removeListener = w3c ?
function(el, type, fn) { el.removeEventListener(type, fn, false); } :
function(el, type, fn) { el.detachEvent('on' type, fn); };
ディスパッチ = w3c ?
function( el, type ){
try{
var evt = doc.createEvent('イベント');
evt.initEvent( type, true, true );
el.dispatchEvent( evt );
}catch( e ){alert( e ) };
} :
function( el, type ){
try{
el.fireEvent( 'on' type );
}catch( e ){alert( e ); }
},
dataManager = {
data : function ( elem, name, data ) {
var getByName = typeof name === "string",
thisCache,
isNode = elem.nodeType、
キャッシュ = isNode ? globalCache : elem、
id = isNode ? elem[expando ] : elem[expando ] && Expando;
if(!id && isNode) {
elem[expando] = id = uuid;
}
if(!キャッシュ[id]){
キャッシュ[id] = {};
}
thisCache = キャッシュ[id];
if(データ !== 未定義) {
thisCache[名前] = データ;
}
getByName を返す ? thisCache[名前] : thisCache;
},
removeData : function ( elem, name ) {
var id = elem[expando],
thisCache = globalCache[id];
if(!id || !thisCache){
return;
}
if(typeof name === 'string') {
このキャッシュ[名前]を削除します。
}else{
globalCache[id] を削除します。
}
}
};
関数 returnFalse() {
return false;
}
関数 returnTrue() {
true を返す;
}
function now() {
return (new Date).getTime();
}
function isEmptyObject( obj ){
for( var i in obj ){
return false;
}
true を返します。
}
function addEvent (elem、types、handler、data) {
if ( elem.nodeType === 3 || elem.nodeType === 8 ) {
return;
}
if ( handler === false ) {
handler = returnFalse;
} else if ( !handler ) {
return;
}
var elemData = dataManager.data( elem )、
events = elemData.events、
eventHandle = elemData.handle、
types = types.split(" ");
if ( !events ) {
elemData.events = events = {};
}
if ( !eventHandle ) {
elemData.handle =eventHandle = function ( e ) {
return evtHandle.call(eventHandle.elem, e );
};
}
eventHandle.elem = elem;
var タイプ、i = 0;
while ( type = type[i ] ) {
var handleObj = {handler : ハンドラー, data : data},
handlers = events[type];
if ( !handlers ) {
handlers = events[type] = [];
addListener( elem, type,eventHandle );
}
handlers.push( handleObj );
}
elem = null;
}
function evtHandle (event) {
event = fixEvent(event || window.event );
var handlers = ((dataManager.data(this, "events") || {})[event.type] || []).slice(0);
event.currentTarget = this;
for( var j = 0, l = handlers.length; j var handleObj = handlers[j];
event.handler = handleObj.handler;
event.data = handleObj.data;
event.handleObj = handleObj;
var ret = handleObj.handler.call( this,event );
if( ret !== 未定義 ) {
if( ret === false ) {
event.preventDefault();
event.stopPropagation();
}
}
if(event.isImmediatePropagationStopped() ) {
break;
}
}
}
function RemoveEvent( elem, Types, handler ) {
// テキスト ノードとコメント ノードでイベントを実行しません
if( elem.nodeType == = 3 || elem.nodeType === 8 ) {
リターン;
}
if( ハンドラー === false ) {
ハンドラー = returnFalse;
}
var type, origType, i = 0, j,
elemData = dataManager.data( elem ),
events = elemData && elemData.events;
if( !elemData || !events ) {
return;
}
// 要素のすべてのイベントのバインドを解除します。
if( !types ) {
types = types || "";
for ( type in events ) {
removeEvent( elem, type );
}
戻る;
}
// スペースで区切られた複数のイベントを処理します
// jQuery(...).unbind("mouseover Mouseout", fn);
types = types.split(" ");
while( (type = type[ i ]) ) {
origType = type;
ハンドルオブジェクト = null;
eventType = イベント[タイプ];
if( !eventType ) {
続行;
}
if( !handler ) {
for ( j = 0; j handleObj =eventType[ j ];
removeEvent( elem, origType, handleObj.handler );
eventType.splice( j--, 1 );
}
続行;
}
for( j = 0; j handleObj =eventType[ j ];
if( handler === handleObj.handler ) {
// 指定されたタイプの指定されたハンドラーを削除します
eventType.splice( j--, 1 );
}
}
}
// ハンドラーが存在しない場合は汎用イベント ハンドラーを削除します
if (eventType.length === 0 ) {
delete events[ origType ];
}
// Expando が使用されなくなったら削除します
if ( isEmptyObject( events ) ) {
var handle = elemData.handle;
if (ハンドル) {
ハンドル.elem = null;
}
elemData.events を削除します。
elemData.handle を削除します。
if ( isEmptyObject( elemData ) ) {
dataManager.removeData( elem, 'events' );
}
}
}
function Event( src ) {
this.originalEvent = src;
this.type = src.type;
this.timeStamp = now();
}
Event.prototype = {
preventDefault: function() {
this.isDefaultPrevented = returnTrue;
var e = this.originalEvent;
if( e.preventDefault ) {
e.preventDefault();
}
e.returnValue = false;
},
stopPropagation: function() {
this.isPropagationStopped = returnTrue;
var e = this.originalEvent;
if( e.stopPropagation ) {
e.stopPropagation();
}
e.cancelBubble = true;
},
stopImmediatePropagation: function() {
this.isImmediatePropagationStopped = returnTrue;
this.stopPropagation();
}、
isDefaultPrevented: returnFalse、
isPropagationStopped: returnFalse、
isImmediatePropagationStopped: returnFalse
};
function fixEvent( evt ) {
var props = "altKey attrChange attrName bubbles button cancelable charCode clientX clientY ctrlKey currentTarget データ詳細eventPhase fromElement handler keyCodelayerX LayerY metalKey newValue offsetX offsetY originalTarget pageX pageY prevValue RELATEDNode RELATEDTarget screenX screenY SHIFTKey srcElement target toElement view WheelDelta that".split(" "),
len = props.length;
varoriginalEvent = evt;
evt = 新しいイベント(オリジナルイベント);
for(var i = len, prop; i;) {
prop = props[ --i ];
evt[ prop ] = オリジナルイベント[ prop ];
}
if(!evt.target) {
evt.target = evt.srcElement ||書類;
}
if( evt.target.nodeType === 3 ) {
evt.target = evt.target.parentNode;
}
if( !evt.popularTarget && evt.fromElement ) {
evt.popularTarget = evt.fromElement === evt.target ? evt.toElement : evt.fromElement;
}
if( evt.pageX == null && evt.clientX != null ) {
var doc = document.documentElement, body = document.body;
evt.pageX = evt.clientX (doc && doc.scrollLeft || body && body.scrollLeft || 0) - (doc && doc.clientLeft || body && body.clientLeft || 0);
evt.pageY = evt.clientY (doc && doc.scrollTop || body && body.scrollTop || 0) - (doc && doc.clientTop || body && body.clientTop || 0);
}
if( !evt.that && ((evt.charCode || evt.charCode === 0) ? evt.charCode : evt.keyCode) ) {
evt.that = evt.charCode || evt.keyCode;
}
if( !evt.metaKey && evt.ctrlKey ) {
evt.metaKey = evt.ctrlKey;
}
if( !evt.that && evt.button !== unknown ) {
evt.that = (evt.button & 1 ? 1 : ( evt.button & 2 ? 3 : ( evt .ボタン & 4 ? 2 : 0 ));
}
return evt;
}
関数バインド (el, type, fn, data ) {
var ハンドラー;
if( typeof type === "object" ) {
for( var key in type ) {
bind(el, key, type[key], data);
}
戻る;
}
ハンドラー = fn;
addEvent( el, type, handler, data );
}
function unbind ( el, type, fn ) {
if( typeof type === "object" ) {
for ( var key in type ) {
unbind( el,キー、タイプ[キー] );
}
}else {
removeEvent( el, type, fn );
}
}
return {
data : dataManager.data,
removeData : dataManager.removeData,
bind : バインド,
アンバインド : アンバインド
};
}(これ);
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。