Jquery 이벤트 여러개 만들기 (on() 함수)
Jquery에서 on 함수에 대해서 알아보도록 하겠습니다.
앞으로는 jquery 1.7 부터 bind(),live(),delegate() 함수들을 대신하다고 하네요.
그렇다면, 앞으로 on()함수가 많이 쓰이겠죠?
$(selector).on(event, childSelector, data, function, map)
selector : 특정한 id #name 이거나 p태그 이런식으로 사용되고,
event : 가장 대표적으로 "click" , "blur" 이벤트들이 있겠죠?
childSelector : selector <div>일 때, 그안에 <p> 태그를 선택하고 싶으면, "p"가 되겠죠.
function : event가 발생할 때, 어떠한 함수를 실행하거나 행위를 해야하는 것을 만들면 되겠죠.
map : 여러가지 이벤트를 등록하기.
예제화면으로 on()함수를 쓰는 방법을 배워보세요.
헤더에 꼭 jquery를 추가해주셔야 됩니다.
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
# 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);
}
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<title>테스트 페이지</title>
</head>
<body>
<p> p태그 와보시고, 눌러보세요.</p>
<button id="off">click 이벤트 없애기</button>
<button id="on">click 이벤트 만들기</button>
<div>
<p>div 안 p태그 눌렀을 때</p>
</div>
<button id="msg">on 함수로 getMsg 함수에 메세지 전달하기</button>
<script>
$(document).ready(function () {
//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");
}
});
//click 이벤트 없애기
$("#off").click(function () { // 버튼 id off를 눌렀을때,
alert("off click를 수행합니다.");
$("p").off("click"); //p 태그 click 이벤트를 없애기
});
//on 메소드로 이벤트를 주기
$("#on").click(function () { //버튼 id on를 눌렀을 때,
alert("on click를 수행합니다.");
$("p").on("click", function () { // click 이벤트를 다시 생성
alert("click 이벤트가 발생했습니다.");
$("p").css("background-color", "green");
});
});
$("div").on("click", "p", function () {
// div 태그 안 childSelector를 설정해서 childSelector 클릭시 이벤트 발생
alert('div 안 p 태그에서 클릭 이벤트');
});
//#msg 버튼을 눌렀을 때,
//이벤트 event.data에 msg를 추가하여서 특정한 함수(getMsg)에게 전달
$("#msg").on("click", { msg: "on함수를 통해서 함수에 메세지 전달" }, getMsg);
function getMsg(event) {
alert(event.data.msg);
}
});
</script>
</body>
</html>
1공유하글 요
