[jQuery] 클릭이벤트 .click() .on("click") 차이점

클릭이벤트 .click() .on("click") 차이점

• .on("click")과 .click()의 가장 큰 차이점은  동적으로 이벤트를 바인딩 할 수 있는지의 차이입니다. 
• .click()은 최초에 선언된 element에만 동작하기 때문에 동적으로 생성된 태그에는 먹히지 않습니다.
• .on("click")은 동적으로 생선된 태그에 클릭 가능하도록 이벤트 바인딩을 해줍니다.
• .on("click")는 미리 메모리를 할당하지 않기 때문에 .click() 보다 메모리 관리에 좋습니다.

이벤트 바인딩이란?
서로 묶어서 연결해 준다는 뜻으로, 발생하는 이벤트와 그 후에 어떤 일이 일어날지 알려주는 함수(콜백함수)와 묶어서 연결해 준다는 뜻입니다.

 

---

예시

<ul id="myPet">
    <li>cat</li>
    <li>dog</li>
    <li>bird</li>
</ul>

 

1. .click() 이벤트

li 태그 클릭시 아래 함수가 실행됩니다.

클릭한 li 태그에 바인딩된 click 이벤트가 실행되어 해당 li 태그가 remove() 될 것 입니다.

$("#myPet").children().click(function() {

    $(this).remove();
});

이때 아래소스처럼 동적으로 새로운 li 태그를 추가한 뒤,

$("#myPet").append("<li>monkey</li>");

새로 추가된 "<li>monkey</li>"를 클릭하면 click() 메소드는 동작하지 않습니다. 

그 이유는 .click() 이벤트는 최초에 페이지를 로딩 할 때 선언되어 있던 element에 이벤트를 바인딩 하고 나서는 더이상 동적으로 바인딩 하지 않기 때문입니다.

 

2. .on("click") 이벤트

이때 .on('click') 이벤트를 사용하여 동적으로 이벤트를 바인딩 시킬 수 있습니다.

on() 메소드란?
주체가 되는 부모 속성의 이벤트를 물려받아서 지정 선택자에게 이벤트를 연결할 수 있습니다.

부모 태그인 'myPet'의 이벤트를 자식 태그인 li들에게 delegate(대리) 시키는 방식으로 메소드를 구현하면 동적으로 추가된 태그에게 이벤트를 줄 수 있습니다.

$("#myPet").on("click", "li", function(event) {

    $("event.targe").remove();
});

즉, myPet 아래에 추가되는 태그는 모두 부모의 .on('click') 이벤트를 물려받게 되는 것입니다. 

그렇기 때문에 동적으로 추가된 li 태그를 클릭하면 .on('click') 이벤트가 동작하여 해당 태그는 remove() 됩니다.

 

💡 TIP
off() - 이벤트 제거하기 통합 메서드

$("#myPet").off().on("click").function(){});

이렇게 사용하면 기존에 클릭 이벤트가 있는 경우 모든 기존 이벤트 핸들러가 제거되고 새로운 click 이벤트 핸들러가 추가 되기 때문에.on('click')을 사용할 때 추가로 off() 메서드를 사용하면 더 좋다고 합니다

 

Reference : https://devmg.tistory.com/237

https://dev-jones.tistory.com/97