JQuery의 on() 함수는 이벤트를 반복적으로 바인딩합니까?

JQuery는 프런트 엔드 개발에서 편리한 DOM 작업 및 이벤트 처리를 제공하는 인기 있는 JavaScript 라이브러리이며 웹 개발의 필수 도구 중 하나입니다. JQuery를 사용할 때 우리는 이벤트 바인딩 함수인 on()을 자주 사용합니다. 그러나 많은 개발자는 종종 다음과 같은 질문에 직면합니다. JQuery의 on() 함수는 이벤트를 반복적으로 바인딩합니까?

먼저 on() 함수의 정의와 사용법을 살펴보겠습니다.

$(selector).on(event, childSelector, data, function(){...})

그 중 selector는 이벤트가 바인딩되는 요소이고, event는 바인딩된 이벤트 유형이며, childSelector는 하위 요소입니다. 이벤트 위임을 선언하는 선택 항목입니다. 데이터는 이벤트 핸들러에 전달된 데이터이고, 함수는 바인딩된 이벤트 핸들러입니다.

on() 함수의 작동 원리는 이벤트가 트리거될 때 선택기와 일치하는 요소가 해당 이벤트 핸들러에 의해 처리된다는 것입니다. on() 함수는 선택한 요소의 이벤트 리스너 목록에 이벤트 핸들러를 추가합니다.

그렇다면 동일한 이벤트 유형을 바인딩하기 위해 on() 함수를 여러 번 사용하면 어떻게 될까요?

실제로 on() 함수가 호출될 때마다 동일한 이벤트 핸들러가 이미 바인딩되어 있어도 이 이벤트 유형의 이벤트 핸들러가 이벤트 리스너 목록에 추가됩니다. 즉, 동일한 이벤트를 바인딩하기 위해 on 메서드를 여러 번 사용하면 동일한 이벤트 핸들러가 이벤트 리스너 목록에 반복적으로 추가됩니다.

예를 들어 다음 코드는 클릭 이벤트를 반복적으로 바인딩합니다.

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

이런 방식으로 요소를 클릭할 때마다 JQuery는 바인딩 순서대로 이벤트 핸들러를 세 번 실행합니다.

그러나 on() 함수를 사용하여 이벤트 핸들러를 바인딩한 다음 다시 off() 함수를 사용하여 이벤트 핸들러의 바인딩을 해제하고 다시 on() 함수를 사용하여 이벤트 핸들러를 바인딩하면 이 이벤트는 핸들러 프로그램은 한 번만 추가됩니다. 왜냐하면 off() 함수를 사용하여 이벤트 바인딩을 해제할 때 JQuery는 이벤트 리스너 목록에서 이벤트 핸들러를 제거하고 on() 함수가 다시 사용될 때만 다시 추가하기 때문입니다.

그래서 off() 함수를 사용하여 이벤트 바인딩을 해제하면 on() 함수로 이벤트를 반복적으로 바인딩하는 문제를 피할 수 있습니다.

$(selector).on('click', function(){
   // code here;
   $(selector).off('click');//解绑click事件
   $(selector).on('click', function(){
     // do something
   });
});

위 코드에서는 이벤트 핸들러의 off() 함수를 사용하여 클릭 이벤트 바인딩을 해제했습니다. 그런 다음 새 클릭 이벤트가 이벤트 핸들러에 다시 바인딩되고 새 이벤트 핸들러가 추가되었습니다.

물론 on() 함수가 이벤트를 반복적으로 바인딩하는 것을 방지하기 위해 off() 함수를 사용하여 이벤트 바인딩을 해제하는 것 외에도 이벤트가 이벤트 리스너 목록에 이미 존재하는지 확인하여 반복 바인딩을 방지할 수도 있습니다.

if(!$(selector).data('hasBind')){
  $(selector).data('hasBind', true).on('click', function(){
    // do something
  });
}

위 코드에서는 data() 메서드를 사용하여 요소에 hasBind 속성을 설정하고 초기 값을 false로 설정했습니다. 그런 다음 hasBind 속성 값을 판단하여 false이면 이벤트를 바인딩하고 hasBind 속성 값을 true로 설정하여 앞으로 반복적으로 바인딩되지 않도록 합니다.

요약하자면 JQuery의 on() 메서드는 이벤트를 반복적으로 바인딩하므로 off() 함수를 사용하여 이벤트 바인딩을 해제하거나 이벤트가 이미 이벤트 리스너 목록에 있는지 확인하여 반복되는 바인딩을 방지해야 합니다. 이렇게 하면 이벤트를 바인딩할 때 반복 실행 문제를 더 잘 방지하고 프런트엔드 개발 효율성을 향상시킬 수 있습니다.

위 내용은 JQuery의 on() 함수는 이벤트를 반복적으로 바인딩합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!