jQuery 구현 원리의 시뮬레이션 코드 -3 이벤트 처리_jquery

개체의 개인 확장 개체에는 events라는 이벤트 관리 개체가 특별히 추가됩니다. 이 개체의 각 이벤트는 동일한 이름의 속성에 해당합니다. 이 속성의 값은 배열입니다. 이 배열에 시퀀스를 추가하여 이벤트 핸들러 목록을 구성합니다. 사용자 정의 이벤트 처리 기능이 이 목록에 푸시됩니다.

이벤트가 발생하면 등록된 익명 함수를 통해 jQuery.event.handle이 실행됩니다. 클로저를 사용하므로 이 함수에서는 이 이벤트 소스 개체를 통해 개체를 찾습니다. .private 확장 데이터를 찾은 다음 이벤트에서 해당 이벤트 핸들러 목록을 찾아 마지막으로 순서대로 실행합니다.

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

///
// #2076
// 이벤트 핸들러 함수
jQuery를 생성하는 데 사용되는 ID입니다. guid = 1;
//jQuery의 이벤트 객체
jQuery.event = { // # 1555
// 객체에 이벤트 추가
// elem은 이벤트 요소를 추가합니다. 유형은 다음과 같습니다. 이벤트 이름, 핸들러 이벤트 핸들러, 데이터 이벤트 관련 데이터
add: function (elem, type, handler, data) {
var handlerObjIn, handlerObj>// 함수에 고유 ID
if ( !handler.guid) {
handler.guid = jQuery.guid;
}
// 이 요소에 해당하는 캐시 데이터 객체를 가져옵니다.
var elemData = jQuery. data(elem);//모든 이벤트에 공통되는 요소 및 핸들러에 해당하는 이벤트 객체를 가져옵니다.
var events = elemData.events || var eventHandle = elemData.handle;
//이미 이벤트 처리 함수 핸들이 하나만 있는 경우 jQuery.event.handle을 사용합니다.
// 이 함수는 클로저를 사용하여 현재 이벤트 객체와 매개변수를 참조합니다. .
if (!eventHandle) {
elemData.handle = eventHandle = function () {
return jQuery.event.handle.apply(eventHandle.elem, 인수)
};
// 클로저 핸들러가 이벤트 소스 객체를 찾을 수 있도록 합니다.
eventHandle.elem = elem;
//
handleObj = { handler: handler, data: data}
handleObj.namespace = "";

handleObj.type = type;
handleObj.guid = handler.guid;
// 각 이벤트는 배열
var 형식의 일련의 핸들러를 가질 수 있습니다. handlers = events[type],
special = jQuery.event.special[type] {}
// 이벤트 핸들러 큐 초기화
if (!handlers) {
handlers = events [type ] = [];
// 특수 이벤트 핸들러를 확인하세요
// 특수
// 이벤트 핸들러가 false를 반환하는 경우에만 addEventListener/attachEvent를 사용하세요
// 실제 이벤트 등록을 완료하세요
//실제 이벤트 처리 함수는 eventHandle
if (!special.setup || Special.setup.call(elem, data, 네임스페이스, eventHandle) === false) {
// 바인딩 요소에 대한 전역 이벤트 핸들러
if (elem.addEventListener) {
elem.addEventListener(type, eventHandle, false)
} else if (elem.attachEvent) {
elem.attachEvent(" on" type, eventHandle);
}
}
}
// 사용자 정의 핸들러 함수는 스택에 있으며 나중에 jQuery.event.handle은 여기에서 실제 핸들러
핸들을 찾습니다. . push(handleObj);// IE에서 메모리 누수를 방지하기 위해 elem을 무효화합니다.
elem = null
},
global: {},
// 실제 이벤트 핸들러 함수,
// return jQuery.event.handle.apply(eventHandle.elem, 인수)를 통해 호출되므로
// 따라서 이때는 이것이 이벤트 소스 객체이고, event 가 이벤트 매개변수입니다
handler: function (event) { // 1904
var all, handlers, 네임스페이스, events;
event = window.event;
event.currentTarget = this
// 이벤트 객체 이벤트 핸들러 목록 찾기
var events = jQuery.data(this, "events"), handlers = events[event.type]
if (events && handlers) {
// Clone the 조작 방지를 위한 핸들러
handlers = handlers.slice(0);
for (var j = 0, l = handlers.length; j < l; j ) {
var handlerObj = handlers[j] ;

// 이벤트 등록 시 저장된 매개변수 가져오기
event.handler =handleObj.handler;
event.data =handleObj.data;
event.handleObj; >var ret = handlerObj.handler.apply(this, 인수);
}
}
return event.result;
},
// #2020
특수: {}
}
//bind 함수 정의
jQuery.fn.bind = function(type, fn)
{
var handler = fn
//Call jQuery.event.add; 이벤트 추가
for (var i = 0, l = this.length; i < l; i ) {
jQuery.event.add(this[i], type, handler)
}
return this ;
}
jQuery.fn.unbind = function (type, fn) {
// 객체 리터럴 처리
if (typeof type === "object" && !type .preventDefault) {
for (var key in type) {
this.unbind(key, type[key])
}
} else {
for (var i = 0, l = this.length ; i < l; i ) {
jQuery.event.remove(this[i], type, fn)
}
}
/ / 클릭 이벤트 등록 방법
jQuery.fn.click = function (fn) {
this.bind("click", fn)
return this; >



이렇게 페이지에서 id가 msg인 요소에 대해 다음 코드를 통해 클릭 이벤트 핸들러 함수를 등록할 수 있습니다.




코드 복사

코드는 다음과 같습니다.


// 이벤트 동작

$( "#msg ").click( function () { alert(this.innerHTML); } );