$ (document) .on ( 'click', '#id', function () {}) vs $ ( '# id'). on ( 'click', function () {}) [닫기]

나는 차이점이 무엇인지 찾으려고 노력했다.

$(document).on('click', '#id', function(){});

과

$('#id').on('click', function(){});

나는 둘 사이에 어떤 차이가 있는지, 그렇다면 그 차이가 무엇인지에 대한 정보를 찾을 수 없었습니다.

어떤 차이가 있다면 누군가 설명해 주시겠습니까?

첫 번째 예는 이벤트 위임을 보여줍니다 . 이벤트 핸들러는 DOM 트리의 상위 요소 (이 경우)에 바인딩되며 document이벤트가 선택자와 일치하는 요소에서 시작된 해당 요소에 도달 할 때 실행됩니다.

이것은 대부분의 DOM 이벤트 가 원점에서 트리를 버블 링 하기 때문에 가능합니다 . #id요소 를 클릭하면 모든 조상 요소를 통해 버블 링되는 클릭 이벤트가 생성됩니다 ( 참고 : 이벤트가 트리에서 아래로 내려올 때 실제로 '캡처 단계'라고하는이 단계가 있습니다. 타겟 ). 해당 조상에서 이벤트를 캡처 할 수 있습니다.

두 번째 예제는 이벤트 핸들러를 요소에 직접 바인딩합니다. 이벤트는 여전히 버블 링되지만 (처리기에서 방지하지 않는 한) 처리기가 대상에 바인딩되어 있으므로이 프로세스의 효과를 볼 수 없습니다.

이벤트 핸들러를 위임하면 바인딩시 DOM에 없었던 요소에 대해 실행되도록 할 수 있습니다. #id두 번째 예제 이후에 요소가 생성 된 경우 핸들러가 실행되지 않습니다. 실행시 DOM에있는 것으로 알고있는 요소에 바인딩하면 핸들러가 실제로 무언가에 연결되고 나중에 적절하게 실행될 수 있습니다.

다음 코드를 고려하십시오.

<ul id="myTask">
  <li>Coding</li>
  <li>Answering</li>
  <li>Getting Paid</li>
</ul>

자, 여기에 차이가 있습니다

// Remove the myTask item when clicked.
$('#myTask').children().click(function () {
  $(this).remove()
});

이제 myTask를 다시 추가하면 어떨까요?

$('#myTask').append('<li>Answer this question on SO</li>');

이 myTask 항목을 클릭해도 이벤트 핸들러가 바인딩되어 있지 않으므로 목록에서 제거되지 않습니다. 대신을 사용 .on하면 새 항목이 추가 노력없이 작동합니다. .on 버전의 모습은 다음과 같습니다.

$('#myTask').on('click', 'li', function (event) {
  $(event.target).remove()
});

요약:

차이 .on()와 .click()그 것 .click()와 연관된 DOM 요소 때 작동하지 않을 .click()때 이벤트 이후 시점에 동적으로 추가 .on()와 연관된 DOM 요소의 상황에서 사용될 수있는 .on()통화 이후 시점에서 동적으로 생성 될 수있다.