[JavaScript] jQuery 이벤트 처리

jQuery 는 이벤트를 어떻게 처리하는 가?

jQuery의 다양한 이벤트 처리 방법

일반적으로 이벤트 하나에 이벤트 핸들러 하나를 등록해 이벤트를 처리한다. 그러나 jQeury에서는 같은 이벤트를 여러번 처리하거나 같은 이벤트 핸들러를 여러 이벤트에 등록해 이벤트를 처리할 수 있다.

네임스페이스의 사용

같은 이벤트를 여러번 처리해야 할 때 jQeury에서는 이벤트를 네임스페이스로 구분할 수 있다. 다음 예와 같이 '이벤트 이름 + 마침표 + 네임스페이스' 형식으로 이벤트 이름 뒤에 네임스페이스를 덧붙인다. 예에서는 'click'이 이벤트이름에 해당하고, 'naver'가 네임스페이스에 해당한다.

 $(elem).on("click.naver", function(e) { ... }); 

네임스페이스는 이벤트 이름 뒤에 덧붙인 문자열을 기준으로 구분한다. 'click.naver1.nvaer2'와 같이 이벤트 이름 뒤에 마침표와 네임스페이스를 여러 개를 덧붙여도 첫 번째 마침표를 기준으로 한 개의 네임스페이스, 즉 'naver1.naver2'로 인식한다.

다음과 같이 이벤트를 제거하면 한 개 이벤트만 제거될 것이라 생각할 수 있다. 하지만 두 개 이벤트가 모두 제거된다. jQuery가 네임스페이스를 처리할 때 마침표를 기준으로 구분해 처리하기 때문이다.

$(elem).off("click.naver1");

다음 예와 같이 이벤트 핸들러를 제거하면 두 번째 이벤트만 제거된다.

$(elem).off("click.naver1.naver2");

tigger() 매서드

elem.trigger("click") 형식으로 사용하는 trigger() 메서드는 요소에 등록된 이벤트 핸들러만 실행시킨다. 실제 이벤트가 일어나는 것은 아니기 때문에 <a>요소에 click 이벤트를 일어나게 해도 href 속성에 설정된 링크로 이동하지 않는다.

이벤트 핸들러 함수에서 this 키워드

이벤트 핸들러 함수에서 this 키워드는 이벤트 핸들러가 등록된 DOM 요소를 가리킨다. jQuery 함수를 사용하면 $(this)와 같이 감싸서 jQuery 객체로 만들어야 한다.

$("#some").on("click", function(e) {
       this;     // <== jQuery로 감싸지 않은 요소(예: <div id="some">...</div>)
       $(this);  // <== jQuery로 감싼 요소
 });

jQuery의 이벤트 관련 파일

jQuery가 이벤트를 어떻게 처리하는지 알고 싶으면 jQeury 라이브러리의 소스 코드를 직접 보면 된다. 그러나 jQuery 사이트에서 다운로드해 사용하는 파일은 배포버전으로 빌드된 파일이라 이벤트에 관련되 부분만 찾아 보기 어렵다. 이벤트에 관련되 부분을 쉽게 찾아 보려면 GitHub의 jQuery 저장소에서 관리하는 파일을 확인한다.

• GitHub의 jQuery 2.2.0 저장소: https://github.com/jquery/jquery/blob/2.2.0/src/
• 최신 작업 저장소: https://github.com/jquery/jquery/tree/master/src

jQuery는 기능에 따라 파일을 분리해 저장소에서 관리한다. 일반적으로 jQuery 저장소에서 이벤트에 관련된 파일은 event.js 파일과 event 디렉터에 있는 파일이다. jQuery를 빌드하면 이 파일의 코드가 하나로 합쳐져 다른 영역의 코드와 결합해 이벤트를 처리한다.

event.js 파일

event.js 파일에는 외부로 공개되는 메서드와 jQuery.event 객체, jQuery.Event 객체의 정보가 있다.( jQuery.event 객체와 jQuery.Event 객체는 다른 객체다)

이벤트 관련 메서드

다음과 같이 jQuery 에서 이벤트를 다룰 때 사용하는 이벤트 등록과 해제에 관련되 메서드가 정의돼 있다.

jQuery.fn.extend({       on: function(){},     one: function(){},     off: function(){}  });

jQuery.event 객체

jQuery의 이벤트 관련 메서드를 실행할 때 사용하는 함수와 속성이 jQuery.event 객체에 정의돼 있다.

jQuery.event = {      // .on()으로 바인딩된 이벤트 종류를 담는 객체     global: {},    // 이벤트 바인딩    add: function( elem, types, handler, data, selector ) {},    // 이벤트 제거    remove: function( elem, types, handler, selector, mappedTypes ) {},    // 이벤트 발생 시 실행    dispatch: function( event ) {},      // 바인딩된 모든 동일 이벤트에 대한 큐 처리    handlers: function( event, handlers ) {},      // 키와 마우스 이벤트 속성 이름 배열    props: Array,       fixHooks: {},  // 이벤트 훅 객체     keyHooks: {},  // 키보드 이벤트 훅 객체     mouseHooks: {},  // 마우스 이벤트 훅 객체     // 이벤트에 따른 훅 처리 및 네이티브 이벤트를 jQuery로 감싸는 함수     fix: function( event ) {},       special: {}  // special 이벤트 객체 }

jQuery.Event 객체

jQuery.Event 객체는 네이티브 이벤트 객체를 감싸는 jQuery 객체다. jQuery.Event 객체는 DOM3 이벤트를 기반으로 한다.

// jQuery 이벤트 생성자 함수   jQuery.Event = function( src, props ) { ... }     jQuery.Event.prototype = {       constructor: jQuery.Event,  // 생성자       // event.preventDefault() 메서드 호출 여부     isDefaultPrevented: returnFalse,       // event.stopPropagation() 메서드 호출 여부     isPropagationStopped: returnFalse,       // event.stopImmediatePropagation() 메서드 호출 여부     isImmediatePropagationStopped: returnFalse,     preventDefault: function() {},  // 이벤트 기본 동작 중단 메서드     stopPropagation: function() {},  // 이벤트 전파 중단 메서드     // 이벤트 전파 및 핸들러 중단 메서드     stopImmediatePropagation: function() {}    };

참고

1. jQuery는 이벤트를 어떻게 처리하는 가?