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.
'[javascript]' 카테고리의 다른 글
| 비주얼 스튜디오 코드 한줄 ,복사 지우기 , 정렬 , 주석 단축키 (0) | 2018.04.27 |
|---|---|
| json를 stringify 사용해보기 (json.stringify로 string으로 바꿔주기) (0) | 2018.04.26 |
| Javascript(자바스크립트),Jquery 버튼(button) 클릭 해보기 (onclick) (1) | 2018.04.25 |
| jsp servlet(서블렛)를 통한 ajax, JsonObject, JsonObject key value 편 (0) | 2018.04.21 |
| jsp servlet(서블렛)를 통한 ajax, object 편 (0) | 2018.04.21 |
미나미나미