[jQuery] on 메서드 이벤트 여러개 연결하여 실행하기출처: https://kcmschool.com/204 [web sprit]

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

제이쿼리의 on 메서드 활용의 기본형은 다음과 같습니다.

$(selector).on(event, function(){ 
// ..... 
}); 
// selector : 이벤트를 적용할 태그나 아이디, 클래스를 선택 
// event : 제이쿼리 이벤트 (ex - click, mouseenter, mouseleave 등.)

이벤트를 여러게 연결 하려면 다음과 같이 작성하면 됩니다.

$(selector).on({ 
click: function() { 
// ..... 
}, 
mouseenter: function() { 
// ..... 
}, 
mouseleave: function() { 
// ..... 
} });

위와 같이 작성하는 법을 사용하면 
하나의 선택자에 여러개의 이벤트를 동시에 사용함에 있어 
가독성이나 소스면에서 좋은 방법 입니다.

on 함수는 선택자의 자식요소에 이벤트를 걸 수 있습니다.

$(selector).on("click", childSelector, function()
{ 
// ..... }); 
// selector 안의 자식요소를 "" 처리하여 childSelector에 적어 주면 자식요소에게 이벤트를 줄 수 있다.

출처 : [jQuery] on 메서드 이벤트 여러개 연결하여 실행하기 - web sprit (kcmschool.com)