jQuery 11번 읽기 이벤트 코어 추가 method

jQuery 11번 읽기 이벤트 코어 추가 method_jquery

WBOY

풀어 주다： 2016-05-16 18:04:12

원래의

1488명이 탐색했습니다.

이 글의 소스코드를 살펴보자. add 정의는 다음과 같다(대부분 생략)

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

 
add: function( elem, type, handler, data ) { 
if ( elem.nodeType === 3 || elem.nodeType === 8 ) { 
return; 
} 
... 
} 

은 HTMLElement, 이벤트 유형(예: 클릭), 이벤트 응답 기능 및 데이터. 또한 유형은 공백으로 구분된 여러 이벤트("mouseover mouseout")를 전달할 수 있습니다. 핸들러는 때때로 객체입니다(라이브 구현 시). 데이터는 최종적으로 확장된 이벤트 객체, 즉 이벤트의 속성으로 정지됩니다. 이벤트는 핸들러의 첫 번째 매개변수로 획득되므로 핸들러에서 데이터를 얻을 수 있습니다.
아래 내용

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

 
if ( elem. nodeType = == 3 || elem.nodeType === 8 ) { 
return; 
} 

텍스트 및 주석 노드가 직접 반환됩니다.

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

 
if ( handler === false ) { 
 handler = returnFalse; 
} else if ( !handler ) { 
// jdalton이 권장하는 버그 #7229 수정 
return; 매개변수 핸들러는 false일 때 returnFalse에 핸들러를 할당하고, returnFalse는 다음과 같은 함수입니다

코드 복사

코드는 다음과 같습니다. 다음: function returnFalse() { return false;

}

 
jQuery는 핸들러를 다음과 같이 설정하여 요소의 기본 동작을 방지하고 이벤트 버블링을 중지합니다. 거짓. 이는 jQuery.event.handle과 함께 확인해야 합니다. 

코드 복사

코드는 다음과 같습니다. var handlerObjIn, if; ( handler.handler ) {

handleObjIn = handler;

handler = handlerObjIn.handler; 
} 
// 실행 중인 함수에 고유 ID가 있는지 확인하세요. 
if ( !handler. guid ) { 
handler.guid = jQuery.guid 
} 

 
handleObjIn, handlerObj 변수를 정의합니다. 
Handler는 말 그대로 이벤트 응답(콜백) 함수인데, 여기에 handler.handler가 있으면 기분이 이상해집니다. 즉, 핸들러는 언제 JS 객체로 전달됩니까? 
대부분 Function 유형이 전달됩니다. 소스 코드에서 jQuery.event.add 호출을 보면 라이브 구현 시 jQuery가 Object 유형을 전달하는 것을 알 수 있습니다. 다음과 같습니다

코드 복사

코드는 다음과 같습니다. add: function(handleObj) { jQuery .event.add(this,

liveConvert(handleObj.origType,handleObj.selector),

jQuery.extend({},handleObj,{handler: liveHandler, guid:handleObj.handler.guid} ) 
}, 

 
이때,handleObjIn에는 전달된 JS 객체의 값이 할당되지만 실제 핸들러는 handlerObjIn.handler입니다. 조금 복잡하므로 이해하는 데 시간이 걸립니다. 

코드 복사

코드는 다음과 같습니다. // 함수가 실행되는지 확인하세요 고유 ID가 있습니다. if ( !handler.guid ) {

handler.guid = jQuery.guid ;

} 

전달된 매개변수 핸들러는 guid 속성을 추가합니다. 증가는 1부터 시작하므로 숫자입니다. jQuery를 사용하여 이벤트를 추가하더라도 이벤트 응답 함수에는 기본적으로 guid 속성이 추가됩니다. 이 가이드는 이벤트를 삭제할 때 사용됩니다.

코드 복사

코드는 다음과 같습니다. // 요소의 이벤트 구조 초기화 var elemData = jQuery._data( elem );

 
먼저 elemData를 가져옵니다. 여기서는 앞서 언급한 jQuery._data가 사용됩니다. HTMLElement에 대해 이벤트가 처음 추가되면 elemData는 빈 객체({})입니다. 

코드 복사

코드는 다음과 같습니다.

 
// elemData가 발견되지 않으면 
// 금지된 noData 요소 중 하나에 바인딩하려고 해야 합니다. 
if ( !elemData ) { 
return;

elemData가 존재하지 않으면 직접 반환됩니다.

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

var events = elemData.events, 
eventHandle = elemData.handle;

이벤트, eventHandle을 정의합니다. 또한 처음으로 두 변수가 모두 정의되지 않았습니다.

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

if ( !events ) { 
 elemData.events = events = {}; 
} 
if ( !eventHandle ) { 
elemData.handle = eventHandle = function( e ) { 
// jQuery.event의 두 번째 이벤트 삭제 .trigger( ) 및 
// 페이지가 언로드된 후 이벤트가 호출되는 경우 
jQuery 반환 유형 !== "undefine" && (!e || jQuery.event.triggered !== e.type) ? 
jQuery.event.handle.apply( eventHandle.elem, 인수 ) : 
undefine; 
} 
} 

 

elemData.events에 값 할당 및 elemData.handle.

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

// elem을 속성으로 추가합니다. 핸들 함수 
// 이는 IE에서 기본이 아닌 이벤트로 인한 메모리 누수를 방지하기 위한 것입니다. 
eventHandle.elem = elem 

 

eventHandle에 대한 대기 요소는 다음과 같은 경우 삭제됩니다. 이벤트 등록이 삭제됩니다. 일부 브라우저에서 메모리 누수를 방지하려면 null로 설정하세요.

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

// 공백으로 구분된 여러 이벤트 처리 
 // jQuery(...).bind("mouseover mouseout", fn); 
types = types.split(" ") 

 

공백이 있는 문자열을 다음과 같이 변환합니다. 커터를 배열로 만듭니다. 이 문장을 사용하면 한 번에 여러 이벤트를 추가할 수 있으며 여러 이벤트의 핸들러는 동일합니다.
다음에는 while 루프

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

 while ( (type = type[ i ]) ) { 
handleObj = handlerObjIn ? 
jQuery.extend({}, handlerObjIn) : 
{ 핸들러: 핸들러, 데이터: 데이터 } 
.. . 
 } 

 

과 같이 순차적으로 처리되는 배열을 반복하고, handlerObj
를 가져오고, 마침표(.)로 구분되는 이벤트 네임스페이스를 처리합니다. 유형에 점이 있으면 네임스페이스가 있고, 그렇지 않으면
이 없습니다. handlerObj에 유형 및 GUID 속성을 추가하세요.
은 핸들러 및 특별 이벤트를 얻기 위해 이러한 후속 이벤트를 삭제할 때 사용됩니다. 대부분의 경우 addEventListener/attachEvent를 사용하여 이벤트를 추가합니다. prepare, beforeunload, live 이벤트 등의 특수 이벤트가 특수하게 처리되는 것을 Special 변수를 통해 알 수 있습니다. Ready는 jQuery.bindReady를 호출하지만 jQuery.bindReady는 여전히 내부적으로 addEventListener/attachEvent를 호출합니다. beforeunload는 window.onbeforeunload를 사용하여 추가됩니다. Live는 이벤트 위임을 구현하며 그 처리도 특별합니다.
마지막으로 배열 핸들에 HandleObj를 추가합니다.
jQuery.event.add의 마지막 문장은 IE의 메모리 누수를 해결합니다.

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

// 메모리 누수를 방지하기 위해 elem을 무효화합니다. IE 
elem = null;

jQuery 이벤트 관리의 데이터 구조를 그림으로 그려봤습니다. 다음과 같습니다