click과 on click 의 차이점??

click( ) 이벤트와 on("click")의 차이점

-> 동적 객체도 이벤트를 받을 수 있다.

 

<ul id="Test">
    <li>Coding</li>
    <li>HTML</li>
</ul>

//1번
$("Test").children().click(function(){
  $(this).remove();
});


//2번 -> 동적태그가 생김
$("Test").children().click(function(){
  $(this).remove();
  $("#Test").append("<li>New tag</li>");
});

 

이렇게 태그가 있을 때로 예를 들어 설명하자면

 

1번에서는 둘다 똑같이 동작한다. 그러나 2번에서는 다르다!

• click( ) 이벤트

새로 생긴 동적객체인 New tag의 태그 li를 클릭해도 이벤트가 동작하지 않는다.

why??

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

 

바인딩(Binding)이란?

프로그램의 어떤 기본 단위가 가질 수 있는 구성요소의 구체적인 값, 성격을 확정하는 것

쉽게 말하면 프로그램의 각종 변수들이 실제 값으로 묶여버리는 것

 

• on("click") 이벤트

동적으로 추가된 태그도 이벤트 가능!!

 

 

제가 이해한대로 적은거라 틀린점이 있다면 댓글 남겨주세요~!

 

 

 

 

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

클릭이벤트 on("click")과 click()의 차이