제이쿼리 -그룹 이벤트 등록 및 삭제

그룹 이벤트 등록 및 삭제하기

앞에서는 단독 이벤트만 등록하는 방법을 배웠다. 이번에는 단독이 아닌 그룹으로 여러개의 이벤트를 등록하는 메서드를 알아볼 것이다.

 

-그룹 이벤트 등록 메서드

한번에 2개 이상의 이벤트를 등록할 수 있다. 즉, 선택한 요소에 이벤트 등록 메서드를 한 번만 적용하여 마우스 포인터를 올렸을 때 와 포커스가 생성되었을 때처럼 두 종류의 이벤트가 발생하도록 만들 수 있다.

 

종류

1.on() -->이벤트 대상 요소에 2개 이상의 이벤트를 등록한다. 이벤트를 등록한 이후에도 동적으로 생성되거나 복제된 요소에도 이벤트가 적용.

2.bind() -->이벤트 대상 요소에 2개 이상의 이벤트를 등록한다.

3.delegate() --> 선택한 요소의 하위 요소에 이벤트를 등록한다.이벤트를 등록한 이후에도 동적으로 생성되거나 복제된 요소에도 이벤트가 적용.

4.one() --> 이벤트 대상 요소에 1개 이상의 이벤트를 등록한다. 지정한 이벤트가 1회 발생하고 자동으로 해제된다.

 

On() 메서드

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

 

% 앞에서 배운 이벤트 등록 방식으로는 객체 조작 메서드에 의해 새롭게 생성,복제된 요소에 이벤트를 등록할 수 없다 !!!!

 

기본형

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

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

제이쿼리 이벤트등록 메서드에는 on() 메서드 외에도bind,delegate,one

메서드가 있다.

 

%차이점

delegate이벤트 등록 메서드- 선택한 요소의 하위 요서에 이벤트를 등록한다. 그리고 이벤트를 등록한 이후에도 동적으로 생성된 요소와 복제된 요소에도 이벤트를 등록한다.

 

one() 이벤트 등록 메서드 – 이벤트가 1회 발생하면 자동으로 등록된 이벤트가 제거된다. 즉, 일회성 이벤트를 등록할 때 사용

등록 방식에 따라 ‘라이브 이벤트’의 등록이 가능하다.

 

<script>

$(function(){

$(".btn_wrap").delegate(".btn_1.on","mouseover focus",function(){

     alert("h1!");

});

$(".btn_1").addClass("on");

$(document).one("mouseover focus",".btn_2.on",function(){

    alert("wec");

});

$(".btn_2").addClass("on");

});

</script>

->09~13행 버튼1에 마우스 포인터를 올리면 경고창에 메세지출력 또한 라이브 이벤트 방식으로 이벤트를 등록하기 때문에 새로 생선한 요소에도 이벤트가 적용된다

->15 ~19행 버튼2에 마우스 포인터를 올리면 경고 창에 wec이라는 메시지 출력 이벤트는 1회만 발생한다.

이벤트 제거 메서드

 

- on / unbind / undelegate 메서드 이벤트 해제하기

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

on () -> off() 메서드

bind() -> unbind()

delegate() -> undelegate()

위와 같이 알맞은 메서드로 이벤트를 해제한다.