on 메서드
on 메서드를 사용하면 요소에
이벤트 핸들러를 추가할 수 있습니다. 핸들러를
제거하려면
off
메서드를 사용하면 되고,
이벤트가 한 번만 발생한 후
핸들러가 스스로 제거되도록 하려면
one
메서드를 사용하세요.
핸들러를 바인딩하는 요소는
on를 호출할 때 존재해야 합니다.
문법
요소에 이벤트 핸들러를 추가하는 방법입니다.
첫 번째 매개변수로 문자열 형태로 하나 또는
공백으로 구분된 여러 개의 이벤트를 전달하고, 두 번째
매개변수로 요소 내부의 자손을 필터링하는 추가적인
선택자를 전달하며, 세 번째 매개변수로는 추가적인
데이터를 전달합니다. 이 데이터는 이벤트 발생 시
event.data
속성으로 핸들러에 전달됩니다. 두 번째와 세 번째 매개변수는
선택 사항입니다. 네 번째로는 이벤트 핸들러 함수를 전달하며,
이 함수에는 이벤트 객체와 선택적인
추가 매개변수가 전달됩니다. 만약 핸들러 함수 대신
false를 전달하면, 함수는 단순히 false를 반환합니다:
$(selector).on(events, [selector], [data], handler(eventObject, [additionalParameters]));
on 메서드를 다른 방식으로 사용할 수도 있습니다.
이 경우 첫 번째 매개변수로
JavaScript 객체를 전달하며, 객체의 키는 이벤트 유형이고
값은 해당 이벤트에 대해 호출되는 핸들러 함수입니다:
$(selector).on({'event type': handler}, [selector], [data]);
추가적인 선택자를 전달하지 않으면, 이벤트는 핸들러를 연결한 요소에서 발생합니다. 그렇지 않은 경우, 이벤트는 이 선택자와 일치하는 자손 요소에서 발생합니다 (위임된 이벤트). 동일한 이벤트 핸들러는 여러 번 요소에 바인딩될 수 있습니다.
예제
#test가 있는 단락을
클릭했을 때 그 텍스트를
alert에
표시해 봅시다. 다른 단락을 클릭해도 아무런 일도
일어나지 않습니다:
<p>text1</p>
<p id="test">text2</p>
<p>text3</p>
$('#test').on('click', function() {
alert( $(this).text() );
});
예제
단락을 클릭했을 때 on 메서드에
전달한 데이터를 출력해 봅시다.
우리가 만든 핸들러 함수 testFunc를
사용하겠습니다:
<p>click</p>
function testFunc(event) {
alert(event.data.text);
}
$('p').on('click', {text: 'aaa'}, testFunc);
