4. jQuery Event (제이쿼리 이벤트)

 

 

jQuery Event 에 대해서 알아 보겠습니다.

 

Is DOM  ready?

 

DOM 이 전부 로딩이 되어 준비가 완료되면 등록된 callback 함수를 실행 시켜주는 함수입니다. 함수의 인자로 callback 함수를 등록 시켜 주면 DOM 이 준비가 되면 등록된 함수가 실행됩니다. 실무에서 많이 사용합니다.

$(handler); // dom 이 준비되면 실행되는 (callback) 함수 handler

$(function() { 
// dom 이 준비되면 실행되는 (callback) 익명 함수
});

$(document).ready(function() {
// dom 이 준비되면 실행되는 (callback) 익명 함수
});

 

on, off

이벤트를 등록하고 해제할때 사용합니다. 특히 지금은 DOM 에 없지만 ajax 등으로 차후에 만들어지는 DOM 의 이벤트를 미리 등록할 수 있습니다. 이러한 방법을 Delegation 이라고 합니다. Delegation 이벤트 방식은 꼭 알아 두시면 유용하게 사용할 수 있습니다.

jQuery 구버젼에서 .bind(), .delegate(), .live() 가 있었는데 .on(), .off() 로 통합되었습니다.

 

$("#myTable tbody tr").on("click", function() {
  console.log($(this).text());
});

$("#myTable tbody tr").off("click"); // 등록된 이벤트 해제

// delegate 방식

$("#myTable tbody").on("click", "tr", function() {
  console.log($(this).text());
});

// delegate 방식 performance 이슈
// 2번 방식이 훨씬 빠르겠죠?

// 1번 방식
$( "body" ).on( "click", "#commentForm .addNew", addComment )

// 2번 방식
$( "#commentForm" ).on( "click", ".addNew", addComment )

 

trigger event

코드로 원하는 이벤트를 발생시킵니다.

// 코드로 click 이벤트를 발생시킵니다.

$("#wow").trigger("click")

// 사용자 정의 이벤트를 만들고 호출 할 수도 있습니다.

$("#wow").on("wowevent", function() { ... });
$("#wow").trigger("wowevent");

 

이벤트 콜백 함수로 전달 되는 event 객체

$("#wow").on("click", function(event) {

  event.preventDefault(); // 이벤트의 디폴트행위를 막습니다. form submit 금지, a 링크이동 금지
    
  event.stopPropagation(); // 부모에게 해당 이벤트가 전파되는 것을 중지시킵니다.
    
  $(this); // click 된 wow element
    
});

 

Data 전달하기

 

function greet( event ) {
  alert( "Hello " + event.data.name );
}
$( "button" ).on( "click", { name: "Karl" }, greet );
$( "button" ).on( "click", { name: "Addy" }, greet );


$( "p" ).on( "myCustomEvent", function( event, myName ) {
  $( this ).text( myName + ", hi there!" );
});

$( "button" ).click(function () {
  $( "p" ).trigger( "myCustomEvent", [ "John" ] );
});


$( "div" ).on( "click", function( event, person ) {
  alert( "Hello, " + person.name );
});
$( "div" ).trigger( "click", { name: "Jim" } );