jQuery 13을 읽어보세요. 이벤트 추가 및 삭제의 핵심 방법_jquery

jQuery의 이벤트 모듈은 데이터 저장소(jQuery.data)에 크게 의존하며, 내 코드의 dataManager 개체가 이에 해당한다는 것을 알 수 있습니다.
여기에서는 바인딩 및 바인딩 해제 방법만 제공됩니다.
1, 이벤트 네임스페이스(eventnamespace)
2, 이벤트 위임(event delegation)
3,domready 등 특수 이벤트는 포함하지 않습니다
인터페이스는 다음과 같습니다

코드 복사 코드는 다음과 같습니다.

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

코드 복사 코드는 다음과 같습니다.

/**
* jQuery의 이벤트
* 2011-06-20 snandy
*
* 이벤트 관리에 사용되는 다양한 도우미 함수입니다.
* 이 코드 뒤에 있는 많은 아이디어는 jQuery 라이브러리(1.6.2)에서 유래되었습니다.
*
* 예
*
* E.bind(el, 'click', fn);
*
* E.bind(el, '클릭', fn, data);
*
* E.unbind(el, '클릭', fn);
*
* E.unbind(el, '클릭');
*
* 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('Event');
evt.initEvent( type, true, true );
el.dispatchEvent( evt );
}catch( e ){ 경고( e ) };
} :
function( el, type ){
try{
el.fireEvent( 'on' type );
}catch( e ){ 경고( e ); }
},
dataManager = {
data : 함수( elem, 이름, 데이터 ) {
var getByName = typeof name === "string",
thisCache,
isNode = elem.nodeType,
캐시 = isNode ? globalCache : elem,
id = isNode ? elem[ 확장 ] : elem[ 확장 ] && 확장;
if(!id && isNode) {
elem[expando] = id = uuid;
}
if(!cache[id]){
cache[id] = {};
}
thisCache = 캐시[id];
if(data !== 정의되지 않음) {
thisCache[이름] = 데이터;
}
getByName을 반환합니까? thisCache[이름] : thisCache;
},
removeData : 함수( elem, 이름 ) {
var id = elem[expando],
thisCache = globalCache[id];
if(!id || !thisCache){
return;
}
if(typeof name === 'string') {
delete thisCache[name];
}else{
globalCache[id] 삭제;
}
}
};
함수 returnFalse() {
false를 반환;
}
function returnTrue() {
return true;
}
function now() {
return (new Date).getTime();
}
function isEmptyObject( obj ){
for( var i in obj ){
return false;
}
true를 반환합니다.
}
function addEvent(elem, 유형, 처리기, 데이터) {
if ( elem.nodeType === 3 || elem.nodeType === 8 ) {
return;
}
if ( 핸들러 === false ) {
handler = returnFalse;
} else if ( !handler ) {
return;
}
var elemData = dataManager.data( elem ),
events = elemData.events,
eventHandle = elemData.handle,
types = type.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 handlerObj = {handler : handler, data : data},
handlers = events[type];
if ( !handlers ) {
handlers = events[type] = [];
addListener( elem, type, eventHandle );
}
handlers.push(handleObj);
}
elem = null;
}
function evtHandle(이벤트) {
event = fixEvent( 이벤트 || window.event );
var handlers = ((dataManager.data(this, "events") || {})[event.type] || []).slice(0);
event.currentTarget = this;
for( var j = 0, l = handlers.length; j < l; j ) {
var handlerObj = handlers[j];
event.handler = handlerObj.handler;
event.data=handleObj.data;
event.handleObj = handlerObj;
var ret = handlerObj.handler.call( this, event );
if( ret !== 정의되지 않음 ) {
if( ret === false ) {
event.preventDefault();
event.stopPropagation();
}
}
if( event.isImmediatePropagationStopped() ) {
break;
}
}
}
function RemoveEvent( elem, type, handler ) {
// 텍스트 및 주석 노드에서 이벤트를 수행하지 마세요
if( elem.nodeType == = 3 || elem.nodeType === 8 ) {
return;
}
if( handler === false ) {
handler = returnFalse;
}
var type, origType, i = 0, j,
elemData = dataManager.data( elem ),
events = elemData && elemData.events;
if( !elemData || !events ) {
return;
}
//
if( !types ) {
types = types || 요소에 대한 모든 이벤트 바인딩 해제 "";
for ( 이벤트 입력 ) {
removeEvent( elem, type );
}
반환;
}
// 공백으로 구분된 여러 이벤트 처리
// jQuery(...).unbind("mouseover mouseout", fn);
유형 = 유형.split(" ");
while( (type = 유형[ i ]) ) {
origType = 유형;
handleObj = null;
이벤트 유형 = 이벤트[ 유형 ];
if( !eventType ) {
계속;
}
if( !handler ) {
for ( j = 0; j < eventType.length; j ) {
handleObj = eventType[ j ];
removeEvent( elem, origType, handlerObj.handler );
eventType.splice( j--, 1 );
}
계속;
}
for( j = 0; j < eventType.length; j ) {
handleObj = eventType[ j ];
if( handler === handlerObj.handler ) {
// 주어진 유형에 대해 주어진 핸들러를 제거합니다.
eventType.splice( j--, 1 );
}
}
}
// 핸들러가 더 이상 존재하지 않으면 일반 이벤트 핸들러를 제거합니다.
if ( eventType.length === 0 ) {
delete events[ origType ];
}
// 더 이상 사용하지 않는 경우 확장을 제거합니다.
if ( isEmptyObject( events ) ) {
var handler = elemData.handle;
if ( 핸들 ) {
handle.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 = 지금();
}
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 버튼 취소 가능 charCode clientX clientY ctrlKey currentTarget 데이터 세부정보 eventPhase fromElement 핸들러 keyCode layerX layerY MetaKey newValue offsetX offsetY OriginalTarget pageX pageY prevValue 관련Node 관련Target screenX screenY ShiftKey srcElement target toElement 뷰 휠Delta which".split(" "),
len = props.length;
var originalEvent = evt;
evt = new Event(originalEvent);
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.관련Target && evt.fromElement ) {
evt.관련Target = 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.which && ((evt.charCode || evt.charCode === 0) ? evt.charCode : evt.keyCode) ) {
evt.which = evt.charCode || evt.keyCode;
}
if( !evt.metaKey && evt.ctrlKey ) {
evt.metaKey = evt.ctrlKey;
}
if( !evt.which && evt.button !== 정의되지 않음 ) {
evt.which = (evt.button & 1 ? 1 : ( evt.button & 2 ? 3 : ( evt .버튼 & 4 ? 2 : 0 ) ));
}
return evt;
}
함수 바인드(el, type, fn, data) {
var handler;
if( typeof type === "object" ) {
for( var key in type ) {
bind(el, key, type[key], data);
}
반환;
}
핸들러 = fn;
addEvent(el, 유형, 핸들러, 데이터);
}
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:bind,
unbind:unbind
};
}(이것);