그룹 이벤트 등록 메소드

  한번에 2개 이상의 이벤트를 등록할 때 사용한다.

  즉, 선택한 요소에 이벤트 등록 메소드를 한번만 적용하여 '마우스 포인터를 올렸을 때'와 '포커스가 생성되었을때'

  처럼 두 종류의 이벤트가 발생하도록 만들 수 있다.

 

  다음은 그룹 이벤트 등록 메소드를 간단히 정리한 표이다.

종류 설명
on() 이벤트 대상 요소에 2개 이상의 이벤트를 등록한다. 사용방식에 따라 이벤트를 등록한 이후에도 동적으로 생성되거나 복제된 요소에도 이벤트가 적용된다.
bind() 이벤트 대상 요소에 2개 이상의 이벤트를 등록한다
delegate() 선택한 요소의 하위 요소에 이벤트를 등록한다. 이벤트를 등록한 이후에도 동적으로 생성되거나 복제된 요소에도 이벤트가 적용된다.
one() 이벤트 대상 요소에 1개 이상의 이벤트를 등록한다. 지정한 이벤트가 1회 발생하고 자동으로 해제된다.

 

on()메소드

  선택한 요소에 이벤트를 등록한 이후에도 새롭게 생성되거나 복제된 요소에 이벤트를 적용할 수 있다.

  즉, 동적으로 생성되거나 복제된 요소에도 이벤트가 등록된다.

  

  다음은 동적으로 생성된 요소에도 이벤트가 등록되는 on() 메소드의 '라이브 이벤트 등록 방식'의 기본형이다.

$([document]"이벤트 대상의 상위 요소 선택"].on("이벤트 종류", "이벤트 대상 선택", function(){
  자바스크립트 코드;
});

  다음은 on()메소드에 '라이브 이벤트 등록 방식'을 사용하여 동적으로 생성된 요소에 이벤트를 등록하는 예제이다.

<script>
  $(function(){
    $(".btn_1.on").on("mouseover focus", function(){
      alert("HELLO!");
    });
    $(".btn_1").addClass("on");
    //이벤트를 등록하고 class값을 생성하면
    //이벤트가 정상적으로 등록되지 않는다.

    $(document).on("mouseover focus", ".btn_2.on", function(){
      alert("WELCOME!");
    });
    $(".btn_2").addClass("on");
    //라이브 이벤트 등록방식으로 이벤트를 등록한 다음
    //class값을 생성하면 이벤트가 정상적으로 등록된다.
  });
</script>
</head>
<body>
  <div id="wrap">
    <p><button class="btn_1">버튼1</button></p>
    <p><button class="btn_2">버튼2</button></p>
  </div>
</body>

delegate()/one() 이벤트 등록 메소드

  delegate() 메소드는 선택한 요소의 하위 요소에 이벤트를 등록한다.

  그리고 이벤트를 등록한 이후에도 동적으로 생성된 요소와 복제된 요소에도 이벤트를 등록한다.

 

  다음은 delegate()의 기본형이다.

$([document | "이벤트 대상의 상위 요소 선택"]).delegate("이벤트 대상 요소 선택", "이벤트 종류",
function(){
  자바스크립트코드;
});

 

  one() 메소드는 이벤트가 1회 발생하면 자동으로 등록된 이벤트가 제거된다.

  즉, 1회성 이벤트를 등록할 때 사용한다. one() 메소드도 등록 방식에 따라 '라이브 이벤트'의 등록이 가능하다.

  다음은 one()의 기본형이다.

1. one() 기본 이벤트 등록 방식
   $("이벤트 대상 선택").one("이벤트종류", function(){
     자바스크립트코드;
   });

2. one() 라이브 이벤트 등록 방식
   $([document | "이벤트 대상의 상위 요소 선택"]).one("이벤트 종류", "이벤트 대상 요소 선택",
   function(){
     자바스크립트코드;
   });

  

  다음은 delegate(), one() 메소드를 사용한 예제이다.

<script>
  $(function(){
    $(".btn_wrap").delegate(".btn_1.on",
    "mouseover focus", function(){
      alert("HELLO!");
    });
    $(".btn_1").addClass("on");
    //[버튼1]에 마우스 포인터(포커스)를 올리면 경고창에
    //"HELLO!"라는 메시지가 출력.
    //라이브 이벤트 방식으로 이벤트를 등록하기 때문에
    //새로 생성한 요소에도 이벤트가 적용된다.

    $(document).one("mouseover focus"
    ".btn_2.on", function(){
      alert("WELCOME!");
    });
    $(".btn_2").addClass("on");
    //[버튼2]에 마우스 포인터(포커스)를 올리면 경고창에
    //"WELCOME!"이라는 메시지가 출력
    //이벤트는 1회만 발생
  });
</script>
</head>
<body>
  <div id="wrap">
    <p><button class="btn_1">버튼1</button>
    </p>
    <p><button class="btn_2">버튼2</button></p>
  </div>
</body>

이벤트 제거 메소드

  이전에 등록된 이벤트를 제거할 때 사용한다.

  다음은 이벤트 제거 메소드의 종류를 정리한 표이다.

종류 설명
off() on() 메소드로 등록한 이벤트를 제거한다
unbind() bind() 메소드로 등록한 이벤트를 제거한다.
undelegate() delegate() 메소드로 등록한 이벤트를 제거한다

 

off() / unbind() / undelegate()로 이벤트 해제하기

  이벤트 등록 메소드에 따라 이벤트를 해제하는 방법도 달라진다.

  on()메소드는 off()메소드로, bind()메소드는 unbind()로, delegate()는 undelegate()로 이벤트를 해제한다.

 

  다음은 각 이벤트 해제 메소드의 기본형이다.

1. on()이벤트 해제를 위한 off()메소드
  - 기본 이벤트 제거 방식
     $("이벤트 대상 요소 선택").off("이벤트 종류");
  - 라이브 이벤트 제거 방식
     $([document | "이벤트 대상 상위 요소 선택"]).off("이벤트 종류", "이벤트 대상 요소 선택");
     
2. bind() 이벤트 해제를 위한 unbind()메소드
     $("이벤트 대상 요소 선택").unbind("이벤트 종류");
     
3. delegate() 이벤트 해제를 위한 undelegate() 메소드
  - 기본 이벤즈 제거 방식
     $("이벤트 대상 요소 선택").delegate("이벤트 종류");
  - 라이브 이벤트 제거 방식
     $([document | "이벤트 대상의 상위 요소 선택"]).undelegate("이벤트 대상 선택", "이벤트 종류");

  다음은 on() 메소드로 '기본 등록 방식'과 '라이브 이벤트 등록 방식'을 사용해 각각의 버튼에 이벤트를 등록하고,

  이벤트 해제 버튼을 클릭하면 이벤트가 해제되는 예제이다.

<script>
 $(function(){
   $(".btn_1").on("mouseover", function(){
     alert("HELLO!");
   });
   $(document).on("mouseover", "btn_2", function(){
     alert("WELCOME!");
   });
   var btn_2=$("<p><button class=\"btn_2\">버튼2</button></p>");
   $("#wrap").append(btn_2);

   $(".del_1").on("click", function(){
     $(".btn_1").off("mouseover");
   });
   $(".del_2").on("click", function(){
     $(document).off("mouseover", ".btn_2");
   });
 });
</script>
</head>
<body>
  <div id="wrap">
    <p><button class="btn_1">버튼1</button></p>
  </div>
  <p>
    <button class="del_1">버튼 1 이벤트 해제</button>
    <button class="del_2">버튼 2 이벤트 해제</button>
  </p>
</body>

(참고 : do it 자바스크립트+제이쿼리 입문)

'Front > JQuery' 카테고리의 다른 글

JQuery(애니메이션 효과 제어 메소드)  (0) 2020.05.26
JQuery(효과 및 애니메이션 메소드)  (0) 2020.05.22
JQuery(이벤트 객체)  (0) 2020.05.22
JQuery(이벤트 등록 메소드)  (0) 2020.05.22
JQuery(객체조작)  (0) 2020.05.20

+ Recent posts

티스토리툴바