jQuery와 이벤트 대표단-JS 튜토리얼-php.cn

Event Delegation with jQuery

코어 포인트

jQuery의 이벤트 대표는 개별 요소에 첨부 된 여러 핸들러 대신 단일 이벤트 핸들러를 부모 요소에 첨부하여 메모리 사용량을 줄이고 성능을 향상시키는 기술입니다.

jQuery 함수

속성을 사용하여 이벤트를 트리거 한 요소를 식별하십시오.

동적 응용 프로그램에서 요소가 종종 추가되거나 제거되며 이벤트 대의원은 수동으로 이벤트를 관리 할 필요가없고 코드 복잡성을 줄이기 때문에 특히 유용합니다. 그러나 이벤트 핸들러를 위임하기 전에 하위 이벤트 핸들러가 처리하고 이벤트가 전파되는 것을 방지 할 수 있습니다.

on() jQuery는 JavaScript에서 이벤트 처리를 단순화합니다. 그러나 이벤트 핸들러가 많을수록 메모리가 더 많이 사용되므로 결국 성능 저하로 이어지고 UI 속도가 느려집니다. 이 기사는 이벤트 대의원이이를 방지하는 방법과 jQuery에 이벤트 대의원을 적용 할 수있는 방법을 살펴 봅니다. 이벤트 대표는 이벤트 처리 기술입니다. 이벤트 처리 기술은 이벤트 핸들러를 이벤트를 듣는 각 요소에 직접 추가하는 대신 이러한 요소의 부모 요소에 단일 이벤트 핸들러를 추가하여 어린이 요소에서 발생합니다. 이벤트를 처리 할 때 어떤 요소가 이벤트를 트리거하고 그에 따라 응답하는지 확인하십시오. 이벤트 대표는 DOM의 이벤트 거품에 의존합니다. 이것은 문서에 도달 할 때까지 DOM 트리까지 부모 요소 및 부모 요소 등으로 전파되는 어린이들에게 유발되는 사건의 과정입니다. 프로그래머는 를 사용하여 버블 링을 멈출 수 있습니다. 모든 DOM 이벤트가 전파되는 것은 아닙니다 (초점, 흐림, 부하 및 언로드는 그렇지 않습니다. 이벤트 대의원은 여러 이벤트 핸들러를 단일 이벤트 핸들러로 바꾸기 때문에 메모리를 적게 사용합니다. 예를 들어, 10 개의 링크 목록에있는 각 링크에 이벤트 핸들러를 첨부하는 경우 메모리 공간을 차지하는 10 개의 이벤트 핸들러가 있습니다. 대신, 이벤트 대의원을 사용하고 상위 요소에서 이벤트를 처리하는 경우 각 링크에 첨부 된 메모리보다 하나의 이벤트 핸들러 만 생성되고 메모리가 적은 메모리 만 사용됩니다. 메모리 소비를 줄이는 것 외에도 이벤트 대표단은 다음과 같은 장점이 있습니다. event.target DOM에서 요소를 추가하거나 제거 할 때 이벤트를 수동으로 관리 할 필요가 없습니다. 기존 이벤트 처리를 사용하는 경우 이벤트 핸들러를 DOM에 추가 된 요소에 첨부하고 DOM에서 제거 된 요소에서 이벤트 처리기를 제거해야합니다.

더 적은 이벤트 처리기로 관리 할 코드를 줄입니다. 이를 통해 중복 이벤트 처리 로직없이 코드를 더 간단하게 만들 수 있으며, 이는 JavaScript를 간결하고 건조하게 유지하는 데 도움이됩니다.

jQuery의 이벤트 대표의 예 새끼 고양이 사진을 판매하는 단일 페이지 응용 프로그램을 개발한다고 가정 해 봅시다. 페이지가로드되면 상위 20 개의 새끼 고양이가 표시됩니다. 사용자가 페이지를 아래로 스크롤하면 더 많은 새끼 고양이가로드됩니다. 우리의 HTML은 다음과 같습니다

기존 이벤트 처리를 사용하여 이벤트 핸들러를 다음과 연결해야합니다.

사용자가 썸네일을 클릭하면 더 큰 이미지가 표시됩니다.

<div id="cats">
  <ul>
    <li>
      <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/"  class="lazy" alt=""/>
      <a href="https://www.php.cn/link/207f170979dd72ff5776e20d07c28732">More info</a>
      <button>Add to cart</button>
    </li>
    ...
  </ul>
</div>

로그인 후 복사

사용자가 "추가 정보"링크를 클릭하면 자세한 정보가 표시됩니다.

사용자가 "카트에 추가"를 클릭하면 이미지를 카트에 추가합니다.

사용자가 페이지를 아래로 스크롤 할 때이 세 가지 이벤트를 추가 된 새 DOM 요소에 첨부합니다.

이 코드는 다음 예제와 유사합니다. 이것은 개별 요소에 이벤트 핸들러를 추가하는 것이 이벤트 대의원 사용과 어떻게 다른지 보여주기위한 것이므로 <🎜 🎜>, <🎜 🎜>,

코드 볼륨은 상당히 큽니다. 이제 이벤트 대의원을 사용하면 코드가 어떻게 보이는지 보자.

키는

의 선택적 두 번째 매개 변수에 있습니다. 선택기를 여기에 전달함으로써

는 직접 바인딩 이벤트 핸들러 대신 대의원 이벤트 핸들러를 처리하고 있음을 알고 있습니다. 이벤트 처리 코드는 이제 훨씬 간단합니다. 를 기준으로 를 전환함으로써 이벤트를 트리거하고 그에 따라 응답 한 요소를 결정할 수 있습니다. 또한,이 새로운 요소에 의해 트리거 된 이벤트가 상위 요소에 위임되기 때문에 이벤트 핸들러를

에로드 한 요소에 더 이상 첨부 할 필요가 없습니다. 이벤트 대의원을 사용할 때 언급 할 수있는 잠재적 "트랩"은 하위 요소에 첨부 된 이벤트 핸들러가 대의원 핸들러 트리거

전에 처리된다는 것입니다. 따라서, 하위 이벤트 핸들러는 <🎜 🎜> 또는 return <🎜 🎜>를 호출 할 수 있으며, 이는 이벤트가 대의원 이벤트 핸들러에 버릴 수 없으며 이벤트가 위임되지 않은 이유에 대해 당황하게합니다.

<🎜 🎜> <<> 결론 loadImage() moreInfo() 이 기사에서는 이벤트 대표단을 연구합니다. 우리는 그것이 포함하는 이벤트 처리로드를 줄임으로써 웹 사이트의 성능을 향상시키는 데 어떻게 도움이 될 수 있는지 보았습니다. 우리는 또한 addToCart() 함수를 통해 jQuery에서 이벤트 대의원을 구현하는 방법을 보았습니다. loadNewKittens()

<<> jQuery 이벤트 위임에 대한 자주 질문

$(document).ready(function() {
  var cats = $('#cats');

  cats.find('img')
    .on('click', function() {
      loadImage();
    })

  cats.find('a')
    .on('click', function(event) {
      event.preventDefault();
      moreInfo();
    });

  cats.find('button')
    .on('click', function() {
      addToCart();
    });

  $(window).scroll(function() {
    var fragment = loadNewKittens();
    // 为新的DOM元素附加事件处理程序
    fragment.find('img')
      .on('click', function() {
        loadImage();
      });

    fragment.find('a')
      .on('click', function(event) {
        event.preventDefault();
        moreInfo();
      });

    fragment.find('button')
      .on('click', function() {
        addToCart();
      });

    fragment.appendTo('#cats ul');
  });
});

로그인 후 복사

~~jQuery의 이벤트 대표는 무엇이며 왜 중요한가?~~

jQuery의 이벤트 대표는 단일 이벤트 리스너를 부모 요소에 첨부 할 수있는 기술입니다.이 행사 청취자는 부모 요소에 해당되는 모든 후손들에게 해당되는 셀렉터의 자손에게 해당되는 모든 후손들에게 해고 될 것입니다. 응용 프로그램에 필요한 이벤트 핸들러 수를 줄임으로써 성능을 크게 향상시킬 수 있기 때문에 이것은 중요합니다. 개별 이벤트 핸들러를 각 요소에 추가하는 대신 이벤트를 부모 요소에 위임 할 수 있습니다. 이것은 요소가 동적으로 추가되거나 제거되는 동적 응용 프로그램에 특히 유용합니다.

$(document).ready(function() {
  $('#cats')
    .on('click', 'img, a, button', function(event) {
      event.preventDefault();
      var target = event.target;

      switch(target.tagName.toLowerCase()) {
        case 'img':
          loadImage();
          break;
        case 'a':
          moreInfo();
          break;
        case 'button':
          addToCart();
          break;
        default:
          // 什么也不做
      }
    });

  $(window).scroll(function() {
    var fragment = loadNewKittens();
    fragment.appendTo('#cats ul');
  });
});

로그인 후 복사

이벤트 대표단은 jQuery에서 어떻게 작동합니까?
jQuery의 이벤트 대표는 대부분의 jQuery 이벤트가 Dom 트리까지 거품을 일으키거나 전파한다는 사실을 활용합니다. 어린이 요소에서 이벤트가 발사되면 부모 요소로 거품이됩니다. 이벤트 리스너를 부모 요소에 추가하면 자식 요소에 트리거 된 이벤트를 캡처 할 수 있습니다.
속성을 사용하여 어떤 자식 요소가 이벤트를 트리거했는지 결정할 수 있습니다.
jQuery에서 직접 이벤트와 위임 된 이벤트의 차이점은 무엇입니까? event.target 직접 이벤트는 특정 요소에 직접 첨부되며 이러한 요소 만 이벤트를 트리거 할 수 있습니다. 반면에, 대의원 행사는 부모 요소에 첨부되며 모든 하위 요소는 이벤트를 트리거 할 수 있습니다. 대표 행사의 장점은 동적으로 추가 된 아동 요소의 이벤트를 처리 할 수 있다는 것입니다.
jQuery에서 이벤트 대표단을 수행하기 위해
메소드를 사용하는 방법은 무엇입니까?

jQuery의 메소드는 이벤트 핸들러를 첨부하는 데 사용됩니다. 이벤트 대의원의 경우 세 가지 매개 변수를 사용합니다. 이벤트 유형, 후손을 필터링하는 데 사용되는 선택기 문자열 및 핸들러 기능이 사용됩니다. 이벤트 유형은 이벤트 유형 (예 : "클릭")을 나타내는 문자열이며, 선택기 문자열은 이벤트를 트리거하는 선택한 요소의 후손을 필터링하는 데 사용되며 핸들러 기능은 이벤트가 실행될 기능입니다. 트리거.
이벤트 대의원을 사용하여 jQuery에서 동적으로 추가 된 요소를 처리 할 수 있습니까?
예, jQuery의 이벤트 대표의 주요 장점 중 하나는 동적으로 추가 된 요소의 이벤트를 처리 할 수 있다는 것입니다. 이벤트 리스너는 상위 요소에 첨부되므로 이벤트 리스너가 첨부 된 후에 해당 이벤트가 추가 되더라도 자식 요소에 트리거 된 이벤트를 캡처 할 수 있습니다. .on() 이벤트 버블은 무엇이며 jQuery의 이벤트 대표와 어떤 관련이 있습니까?
이벤트 버블은 이벤트 전파 유형으로, 이벤트가 특정 요소로 시작하여 조상에게 거품을 일으키는 이벤트 전파 유형입니다. jQuery 사용 이벤트 버블의 이벤트 대표단 이벤트 청취자를 부모 요소에 첨부합니다. 어린이 요소에서 이벤트가 발사되면 이벤트 청취자가 캡처 할 수있는 상위 요소로 거품이됩니다.
jQuery에서 이벤트 전파를 중지하는 방법은 무엇입니까? .on()
메소드를 사용하여 jQuery에서 이벤트 전파를 중지 할 수 있습니다. 이 방법은 이벤트가 DOM 트리로 거품되는 것을 방지하여 부모 핸들러가 이벤트 알림을받지 못하게합니다. 그러나 코드를 디버깅하고 이해하기가 더 어려워 지므로주의해서 사용해야합니다.
jQuery에서 이벤트 처리에 사용되는 와
방법의 차이점은 무엇입니까?

jQuery의 메소드는 이벤트 핸들러를 요소에 직접 첨부하는 데 사용됩니다. 반면에 메소드는 이벤트 핸들러를 요소 (예 : )에 직접 첨부하는 데 사용될 수 있으며 이벤트 위임을위한 부모 요소에 사용할 수 있습니다.
메소드는보다 일반적이며 jQuery에 이벤트 핸들러를 첨부하는 데 선호되는 방법입니다.
이벤트 대의원을 사용하여 jQuery에서 사용자 정의 이벤트를 처리 할 수 있습니까?
예, 이벤트 대의원을 사용하여 jQuery에서 사용자 정의 이벤트를 처리 할 수 있습니다. 표준 이벤트와 마찬가지로 이벤트 리스너를 부모 요소에 첨부 할 수 있으며,이 요소는 어린이들에게 트리거 된 맞춤형 이벤트를 캡처합니다.
jQuery에서 이벤트 핸들러를 삭제하는 방법은 무엇입니까?
당신은
메소드를 사용하여 jQuery에서 이벤트 핸들러를 삭제할 수 있습니다. 이 메소드는 요소에서 모든 이벤트 핸들러를 삭제하거나 특정 이벤트 유형 또는 네임 스페이스가 첨부 된 이벤트 핸들러 만 삭제하는 데 사용할 수 있습니다.

위 내용은 jQuery와 이벤트 대표단의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!