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

이 글의 소스코드를 살펴보자. 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 이벤트 관리의 데이터 구조를 그림으로 그려봤습니다. 다음과 같습니다