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


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

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

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


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

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


on함수로 이벤트 없애기

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


on함수로 이벤트 만들기

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


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

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


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

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


* 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음
작성자 소개
초이 프로필
WrapUp 블로거

초이

반려견을 좋아하고, 차를 좋아하고, 여행을 좋아하고, 맛집을 찾아 즐기는 웹 개발자 입니다^^