[jQuery] 이벤트 연결(event binding) - .on() 메소드 특징, on() 함수 형식, button의 id가 "btn"인 요소에 click 이벤트 연결하는 다양한 방법, .one() 메소드

 

 

이벤트 연결(event binding)

·       .on() 메소드

·       .one() 메소드

 

 

 

.on() 메소드 특징

·       선택한 요소에 어떤 타입의 이벤트라도 연결할 수 있습니다.

·       하나의 이벤트 핸들러에 여러 개의 이벤트를 동시에 연결할 수 있습니다.

·       선택한 요소에 여러 개의 이벤트 핸들러와 여러 개의 이벤트를 같이 연결할 수 있습니다.

·       사용자 지정 이벤트(custom event)를 위해 이벤트 핸들러로 데이터를 넘길 수 있습니다.

·       차후에 다루게 될 요소를 이벤트에 연결할 수 있습니다.

 

 

 

 

on() 함수 형식

선택된 element에 이벤트 핸들러를 묶어줍니다.

특정 요소에서 발생하는 이벤트를 처리하기 위해서는 이벤트 핸들러(event handler) 함수를 작성해야만 합니다. 이렇게 작성된 이벤트 핸들러를 특정 요소에 연결하는 것을 이벤트의 연결(event binding)이라고 합니다.

 

$(selector).on(event, childSelector, data, function)

 

구성요소	설명
event	·       필수 요소 ·       선택된 엘리먼트에 접근하기 위한 하나 이상의 이벤트나 네임스페이스를 지정합니다.
childSelector	·       선택사항 ·       오직 특정한 자식 엘리멘트에 접근해야 한다고 지정하는 것을 말합니다.
data	·       선택사항 ·       함수에 따라 추가적인 데이터를 지정하는 옵션입니다.
function	·       필수 요소 ·       이벤트가 발생할 때 실행되는 함수를 지정하기 위해 사용됩니다.

 

 

button의 id가 "btn"인 요소에 click 이벤트 연결하는 다양한 방법

$("#btn").click(function(event) { 실행코드 });

$("#btn").bind("click", function(event) { 실행코드 });

$("#btn").on("click", function(event) { 실행코드 });

$("body").on({click: function(event) { 실행코드 }}, "#btn");

$("body").on("click", "#btn", function(event) { 실행코드 });

 

$("p").on("click", function() { alert($(this).text()); });   $("div.test").on({ mouseenter : function() { $(this).addClass("inside"); }, mouseleave : function() { $(this).removeClass("inside"); } });

 

 

.one() 메소드

.one() 메소드는 연결된 이벤트 핸들러가 한 번 실행되고 나서는, 더는 실행되지 않습니다.

또한, 같은 이벤트에 대해 연결된 이벤트 핸들러가 한 번 실행된 후에는 다른 이벤트 핸들러를 실행하고 싶을 때도 사용할 수 있습니다.

.one() 메소드는 .on() 메소드와 같은 인수를 전달받습니다.

따라서 여러 개의 이벤트 핸들러와 여러 개의 이벤트를 가질 수 있는 등 .on() 메소드와 같은 특징을 갖습니다