[제이쿼리]- 그룹 이벤트 등록 메서드 종류 / 라이브 이벤트 등록 메서드/ 동적으로 생성한 요소에 이벤트 등록하기 - 라이브 이벤트

그룹 이벤트 등록 메서드 종류 

 

그룹 이벤트 등록 메서드는 한 번의 두 개 이상의 이벤트를 등록할 때 사용한다. 

그룹 이벤트는 다양한 종류가 있다. 

 

그룹이벤트 기본형에 메서드 이름만 달리 적어주면 된다. 

주로 on을 쓰고 이벤트를 찾아볼 때 메서드를 참고해 주면 된다. 

 

1. ★on( )

: 이벤트 대상 요소에 2개 이상의 이벤트를 등록한다.

사용 방식에 따라 이벤트를 등록한 이후에 동적으로 생성되거나 복제된 요소에도 이벤트가 적용된다. 

[on()메서드 등록 방식 1]

$('이벤트 대상').on("이벤트종류1 이벤트종류2 이벤트종류3...", function(){ 코드 });
: 여러 개의 이벤트를 한꺼번에 등록한다.

* 단, 이벤트가 발생할 때마다 동일한 이벤트 핸들러(함수)가 실행된다. 
----------------------------------------------------------------------------------
[on()메서드 등록 방식 2]

 $('이벤트 대상').on({
    '이벤트종류1 이벤트종류2 이벤트종류3...' : function(){ 코드 }
})
: 1번과 동일하다. 객체로 등록하는 부분만 다르다. 여러 개의 이벤트를 한꺼번에 객체로 등록한다.

* 단, 이벤트가 발생할 때마다 동일한 이벤트 핸들러(함수)가 실행된다. 
----------------------------------------------------------------------------------
[on()메서드 등록 방식 3]

 $('이벤트 대상').on({
     '이벤트종류1' : function(){ 코드 },
     '이벤트종류2' : function(){ 코드 },
     '이벤트종류3' : function(){ 코드 },
})
----------------------------------------------------------------------------------
[라이브 이벤트 등록]
$('document 또는 이벤트 대상의 상위 요소 부모요소').on('이벤트 종류', '이벤트 대상', function(){
    이벤트 핸들러;
})

 

2. bind( )

: 이벤트 대상 요소에 2개 이상의 이벤트를 등록한다. ( 안쓴다 )

 

3.  delegate( )

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

* on( )라이브 이벤트와 문법상 다른 점은 이벤트 대상과 이벤트 종류의 자리가 서로 반대이다. 

자리가 바뀌면 오류 발생함으로 주의  

[delegate 라이브 이벤트 기본형]

$('document 또는 이벤트 대상의 상위 요소 부모요소'). delegate('이벤트 대상', '이벤트 종류', function(){
    이벤트 핸들러;
})

 

4. one( )

: 이벤트 대상에 1개 이상의 이벤트를 등록한다. 지정한 이벤트가 1번 실행되고 자동으로 삭제된다. ( 새로고침 하면 다시 실행되긴 함)

일회성 이벤트에 사용 / one 메서드는 알아서 삭제되기에 삭제해주는 메서드가 없다. 

[one 일반 이벤트 기본형]

$('이벤트 대상 요소').one('이벤트명', function(){ 이벤트핸들러 })

[one 라이브 이벤트 기본형]

$('document 또는 이벤트 대상의 상위 요소 부모요소').one('이벤트 종류', '이벤트 대상', function(){
    이벤트 핸들러;
})

---

라이브 이벤트 등록 메서드

 

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

그래서 동적으로 생성된 요소에도 이벤트를 넣어야할 경우, 

라이브 이벤트 등록 메서드를 사용해야 한다. 

 

[기본형]

$('document 또는 이벤트 대상의 상위 요소 부모요소').on('이벤트 종류', '이벤트 대상', function(){
    이벤트 핸들러;
})

document 쓸 때는 문자열 안쓴다. 위의 기본형은 on의 기본형.

---

예제 ) 동적으로 생성한 요소에 그룹이벤트와 라이브이벤트를 각각 등록해 보고 실행되는지 확인해 보기 

 <div id="wrap">

      <p>

        <button class="btn1">버튼1</button>

      </p>

      <p>

        <button class="btn2">버튼2</button>

      </p>

    </div>

버튼2에 마우스를 올리면 얼럿창이 뜨게 된다.

 

 //일반 그룹 이벤트 -> 동적으로 생성되었기에 이벤트가 실행되지 않는다.

        //클래스가 btn1이면서 on인 요소에 mouseover focus이벤트를 등록

        $(".btn1.on").on("mouseover focus", function () {

          alert("hello");

        });

        //btn1에 on이라는 클래스를 동적으로 추가해줌

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

 

동적이게 추가한 요소에 일반 그룹이벤트는 적용이 되지 않는다. 

 //라이브 이벤트로 등록해보기

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

          alert("welcome");

        });

        //btn2에 on이라는 클래스를 동적으로 추가해줌

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

 

라이브 이벤트를 사용하면 동적으로 생성한 요소에 이벤트를 넣을 수 있다. 

---

예제) delegate 이벤트 메서드 

<div id="wrap2">

      <p class="btn_wrap">

        <button class="btn3">버튼3</button>

      </p>

      <p>

        <button class="btn4">버튼4</button>

      </p>

    </div>

 //delegate 이벤트 메서드 .btn3이면서.on에 이벤트 추가

        $(".btn_wrap").delegate(".btn3.on", "click", function () {

          alert("delegate 이벤트 메서드입니다");

        });

        //btn3에 on이라는 클래스를 동적으로 추가해줌

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

btn3의 부모요소인 btn_wrap을 선택하여 라이브 이벤트를 등록

---

예제) one 메서드

 <div id="wrap2">

      <p class="btn_wrap">

        <button class="btn3">버튼3</button>

      </p>

      <p>

        <button class="btn4">버튼4</button>

      </p>

    </div>

 

    //one 메서드 라이브 이벤트

        $(document).one("click", ".btn4.on", function () {

          alert("one 이벤트 메서드입니다");

        });

        //btn4에 on이라는 클래스를 동적으로 추가해줌

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

btn4는 부모요소를 특정하기 어렵기 때문에 document를 선택하여 이벤트를 등록함.