'bind()'에 해당되는 글 1건

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);
}



See the Pen on_func by Nami (@NamuNami) on CodePen.




블로그 이미지

미나미나미

,