[JQUERY] on 함수 사용하여 여러개 이벤트 한번에 사용하기

Jquery의 .on() 함수를 알아보겠습니다.

Jquery 1.7 버전부터 bind(), live(), delegate() 함수를 대신해 on() 함수를 사용할 수 있습니다.

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

on함수로 여러개 이벤트 등록하기

//p 태그에 이벤트를 여러개 주기
$("p").on({
	mouseenter: function () { //마우스 p 태그 안에 들어왔을 때,
		alert("mouseenter 이벤트가 발생했습니다.");
		$("p").css("background-color", "red");
	},
	mouseleave: function () {//마우스가 p 태그 밖으로 나갔을 때,
		alert("mouseleave 이벤트가 발생했습니다.");
		$("p").css("background-color", "lightblue");
	},
	click: function () { //마우스 클릭 p 태그 안에서 일어날 때,
		alert("click 이벤트가 발생했습니다.");
		$("p").css("background-color", "green");
	}
});

on함수로 이벤트 없애기

//click 이벤트 없애기
$("#off").click(function () { // 버튼 id off를 눌렀을때,
	alert("off click를 수행합니다.");
	$("p").off("click"); //p 태그 click 이벤트를 없애기
});

on함수로 이벤트 만들기

//on 메소드로 이벤트를 주기
$("#on").click(function () { //버튼 id on를 눌렀을 때,
	alert("on click를 수행합니다.");
	$("p").on("click" , function(){ // click 이벤트를 다시 생성
		alert("click 이벤트가 발생했습니다.");
		$("p").css("background-color", "green");
	});
});

on함수 특정 selector에 특정 childselector 이벤트 주기

$("div").on("click","p",function(){
	// div 태그 안 childSelector를 설정해서 childSelector 클릭시 이벤트 발생
	alert('div 안 p 태그에서 클릭 이벤트');
});

on함수 특정 함수에 data를 전달하기

//#msg 버튼을 눌렀을 때,
//이벤트 event.data에 msg를 추가하여서 특정한 함수(getMsg)에게 전달
$("#msg").on("click",{msg : "on함수를 통해서 함수에 메세지 전달"} , getMsg);
function getMsg(event){
	alert(event.data.msg);
}