[jQuery] .on() - 다양한 이벤트 핸들러에 연결하는 메서드

안녕하세요. 경제적, 시간적 자유를 꿈꾸는 한량입니다.

jQuery의 .on() 사용법

jQuery의 .on()은 다양한 유형의 이벤트 핸들러를 요소에 연결하는 메서드입니다.
.on() 메서드를 사용하면, 선택한 요소에 이벤트 핸들러를 연결할 수 있으며,
이벤트 핸들러 함수의 실행 조건을 세부적으로 제어할 수 있습니다.

 

.on() 메서드의 가장 간단한 형태는 다음과 같습니다.

$("selector").on("events", "handler");

위의 코드에서 'selector'는 이벤트 핸들러를 연결할 요소의 선택자를 나타내며, 
'events'는 연결할 이벤트를 'handler'는 이벤트 핸들러 함수를 나타냅니다.

 

예를 들어, 다음과 같은 코드에서 '#myButton' 요소에 클릭 이벤트를 
연결하고 싶다면, 다음과 같이 코드를 작성할 수 있습니다.

// javascript code
$('#myButton').on('click', function() {
  alert('클릭됨!');
});

// html code
<button id="myButton">클릭해보세요</button>

위의 코드는 '#myButton' 요소를 클릭하면 '클릭됨!'이라는 메시지를 출력합니다.

 

.on() 메서드를 사용하면, 선택한 요소에 여러 이벤트 핸들러를 한 번에 연결할 수도 있습니다. 
이때, 이벤트 이름을 공백으로 구분하여 나열하면 됩니다.

$('#myButton').on('click mouseenter mouseleave', function() {
  alert("클릭 또는 마우스 이벤트가 발생했습니다.");
});

위의 코드는 #myButton 요소에 클릭, 마우스 진입, 마우스 이탈 이벤트 

모두에 대한 이벤트 핸들러를 연결합니다.