ZeroCho Blog

안녕하세요. 이번 시간에는 제이쿼리 이벤트에 대해 알아보겠습니다. 제이쿼리의 장점 중 하나죠. 이벤트 관리가 편리합니다. 선택한 태그에 이벤트를 붙이기만 하면 되니까요. 먼저 가장 많이 쓰이는 이벤트부터 알아보고 가겠습니다.

$(function() { 내용 });

제이쿼리 코드를 $(function() { }) 안에 넣는 것을 본 적이 있죠? 또는 $(document).ready(function() { }); 안에 넣거나요. 앞의 둘은 같은 겁니다. 그 이유는 jQuery 분석 시간에 다뤘습니다.

이 코드의 역할은 document가 ready되면 콜백 함수의 내용을 실행하라는 겁니다. ready 되었다는 것은 DOM 로딩이 완료되었다는 겁니다. (이미지나 아이프레임은 제외합니다)

$(function() { alert('hello') });

순수 자바스크립트로 코딩하자면,

function ready(fn) {
  if (document.readyState != 'loading'){
    fn();
  } else {
    document.addEventListener('DOMContentLoaded', fn);
  }
}
ready(function() { alert('hello'); });

해야 합니다. 제이쿼리에 비해 많이 복잡합니다. 사실 제이쿼리는 이미 내부적으로 저 동작을 수행하도록 코딩되어있기 때문에 특별한 차이는 없습니다.

On, Off, One

이제부터 본격적으로 이벤트를 다는 법을 알아봅시다. on 메소드가 대표적입니다. bind나 live, delegate 메소드를 쓰시는 분이 있는데 안 쓰는 것을 권장합니다. 모든 기능이 on으로 통합되었습니다. on 메소드는 다음과 같이 사용합니다. 태그에 on 메소드를 붙여주면 됩니다.

$('#zero').on('이벤트명', function() {
  // 내용...
});

또는 여러 개의 이벤트를 동시에 달 수 있습니다. 첫 번째 것은 여러 개의 이벤트에 하나의 콜백 함수만 다는 경우고, 두 번째는 각각의 이벤트에 다른 콜백 함수를 달아주는 겁니다. 세 번째는 두 번째와 같은데 그냥 이벤트를 체이닝 기법으로 연달아 달아주는 겁니다.

$('#zero').on('이벤트1 이벤트2', function() {
  // 내용...
});
$('#zero').on({
  이벤트1: function() {},
  이벤트2: function() {},
  ...
});
$('#zero').on('이벤트1', function() { ... }).on('이벤트2', function() { ... })...

아직 생성되지 않은 태그에 이벤트를 미리 달아놓을 수도 있습니다. 만들어지지도 않았는 데 왜 이벤트를 미리 달아놓을까요? 예를 들면 AJAX 요청으로 태그를 새로 가져오거나 만들 때가 있습니다. 이런 태그들에 이벤트를 직접 달기 어려울 때, 이벤트를 미리 달아놓는 기법을 사용합니다. 이를 Delegation이라고 부르며, 이전의 delegate 메소드가 이 역할을 했다가, on으로 통합되었습니다.

두 번째 인자로 선택자를 받는 부분이 추가되었습니다. 선택자 부분에 새로 추가될 태그의 선택자를 추가하는 겁니다.

$(document).on('이벤트명', '선택자', function() {
  // 내용;
});

달았던 이벤트를 끄려면 off 메소드를 사용합니다.

$('#zero').off('이벤트명')

만약 같은 이벤트가 여러 개 달려있어서 선택적으로 끄고 싶다면, 이벤트 이름 뒤에 네임스페이스를 붙여줄 수 있습니다. 아래의 예는 click 이벤트가 두 개 달려있습니다. 두 클릭 이벤트를 구분하기 위해 점 뒤에 네임스페이스를 달아줬습니다. first와 second가 그것입니다. 나중에 네임스페이스를 사용하여 off로 특정 이벤트만 끌 수 있습니다.

$('#zero').on('click.first', function() { ... }).on('click.second', function() { ... });
$('#zero').off('click.first'); // click.second 이벤트는 유지

이벤트를 한 번만 실행되게 하려면 on 메소드 대신 one 메소드를 사용합니다.

$('#zero').one('이벤트명', function () {
  // 내용...
});

이벤트 메소드

on 외에도 직접 이벤트명을 메소드로 하는 메소드들이 있습니다. click, mouseenter, mouseleave, dbclick, input, ready 등이 거의 모든 이벤트에 해당하는 메소드들이 있습니다만 저는 그냥 on 메소드를 쓰는 것을 추천합니다. 나중에 수정하기 편합니다.

$('#zero').click(function() {});
$('#zero').mouseenter(function() {});
$('#zero').hover(function() {});

위에 처음 보는 이벤트가 하나 있습니다. hover인데요. mouseenter과 mouseleave를 합쳐놓은 메소드입니다. 즉 마우스를 어떤 태그 위에 올렸다 뺐다 할 때 수행할 동작을 정의할 수 있습니다.

이벤트 객체

콜백 함수의 첫 인자로는 이벤트 객체가 전달됩니다.

$('#zero').click(function(event) {
  event.prevenDefault();
  event.stopPropagation();
});

preventDefault 메소드는 태그의 기본 동작(예를 들면, a 태그는 클릭 시 링크이동, form 태그은 폼 내용 전송)을 하지 않게 막아주는 역할을 합니다. stopPropagation 메소드는 태그를 클릭 시 부모에게 이벤트가 전달되지 않도록 합니다. 이벤트에 대해 자세히 알고싶다면 이벤트 강좌를 참고하세요.

이벤트 실행

trigger 메소드로 이벤트를 실행할 수 있습니다.

$('#zero').on('click', function() { 내용 });
$('#zero').trigger('click');

trigger 메소드의 장점은 커스텀 이벤트를 만들고 호출할 수 있다는 겁니다.

$('#zero').on('custom', function() { 내용 });
$('#zero').trigger('custom');

기타

다른 특별한 점으로는 콜백 함수 안에서 $(this)로 이벤트가 발생한 객체를 선택할 수 있습니다.

$('a').click(function() {
  $(this); // 여러 개의 a태그 중 클릭된 a 태그를 선택
});

또한 이벤트 과정 도중에 데이터를 전달할 수 있습니다. 전달한 데이터는 event 객체의 data 속성에 들어있습니다.

$('#zero').on('click', { name: 'Zero' }, function(event) {
  alert(event.data.name); // Zero
});

다음 시간에는 제이쿼리 애니메이션에 대해 알아보겠습니다!