[jQuery] on 메서드 이벤트 여러개 연결하여 실행하기

$(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에 적어 주면 자식요소에게 이벤트를 줄 수 있다.