jQuery에서 이벤트를 처리하기 위해 이벤트를 트리거 한 onclick 또는 find 요소를 사용하는 것이 더 낫습니다.

하루가 끝나면 모든 이벤트는 DOM의 일부 요소에 바인딩됩니다. 의 경우 .bindjQuery 객체의 요소 (또는 요소)에 직접 바인딩합니다. 예를 들어 jQuery 객체에 100 개의 요소가 포함되어 있다면 100 개의 이벤트 리스너를 바인딩하게됩니다.

의 경우 .live, .delegate및 .on: 하나의 이벤트 리스너는 일반적으로 DOM 트리의 최상위 노드 중 하나에, 바인딩 document, document.documentElement(요소), 또는 document.body.

DOM 이벤트가 트리를 통해 버블 링 되기 때문에 body 요소에 연결된 이벤트 핸들러는 실제로 페이지의 모든 요소에서 발생하는 클릭 이벤트를받을 수 있습니다. 따라서 100 개의 이벤트를 바인딩하는 대신 하나만 바인딩 할 수 있습니다.

적은 수의 요소 (예 : 5 개 미만)의 경우 이벤트 핸들러를 직접 바인딩하는 것이 더 빠를 수 있습니다 (성능이 문제가되지 않을 것 같음). 많은 요소의 경우 항상 .on을 사용하십시오.

.on의 다른 장점은 DOM에 요소를 추가하면 이벤트 핸들러를 이러한 새 요소에 바인딩하는 것에 대해 걱정할 필요가 없다는 것입니다. 예를 들어 HTML 목록을 살펴 보겠습니다.

 <ul id="todo">
  <li>buy milk</li>
  <li>arrange haircut</li>
  <li>pay credit card bill</li>
</ul>

다음으로, 일부 jQuery :

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

이제 할 일을 추가하면 어떨까요?

   $('#todo').append('<li>answer all the questions on SO</li>')

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

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