JavaScript(jQuery)의 이벤트 위임

1: 이벤트 위임이란 무엇인가요?

이벤트 위임은 이벤트 버블링을 사용하여 특정 유형의 모든 이벤트를 관리하기 위해 하나의 이벤트 핸들러만 지정합니다.

2: 이벤트 위임을 사용하는 이유는 무엇인가요?

1. JavaScript에서 페이지에 추가되는 이벤트 핸들러의 수는 페이지의 전반적인 실행 성능과 직접적인 관련이 있습니다. 왜? 각 이벤트 처리 함수는 객체이기 때문에 객체가 메모리를 차지하게 되면 메모리에 객체가 많아질수록 성능이 저하됩니다. 또한 모든 이벤트 핸들러를 미리 지정해야 함으로써 발생하는 DOM 방문 횟수로 인해 전체 페이지의 대화형 준비 시간이 지연됩니다.
2. 데이터가 많고 목록이 긴 테이블에 이벤트를 하나씩 추가하는 것은 그야말로 악몽입니다. 따라서 이벤트 위임을 통해 페이지 실행 성능을 크게 향상시키고 개발자의 작업량을 줄일 수 있습니다.

3: JavaScript의 예

다음 HTML 코드를 예로 들어 이벤트 위임을 사용하여 마우스가 li 요소를 클릭하면 li 요소의 배경이 빨간색으로 변한다는 것을 인식합니다.

       <ul id = "lists">
         <li>列表1</li>
         <li>列表2</li>
          <li>列表3</li>
          <li>列表4</li>
         <li>列表5</li>
          <li>列表6</li>
   </ul>

다음은 JavaScript 코드입니다.

var lists = document.getElementById("lists"); 
          lists.addEventListener("click",function(event){
              var target = event.target;
              //防止父元素ul也触发事件
              if(target.nodeName == "LI"){
                 target.style.backgroundColor = "red";
              }
         })

효과를 얻으려면 목록 4를 클릭하세요.

4: jQuery의 예

jQuery의 이벤트 위임 방법은 상대적으로 풍부합니다. 동일한 예 예:

1. on 메서드를 사용하면 코드는 다음과 같습니다.

 $(function(){
            $("#lists").on("click","li",function(event){
                 var target = $(event.target);
                 target.css("background-color","red");
             })
         })

2. Delegate() 메서드를 사용하면 코드는 다음과 같습니다.

$(function(){
            $("#lists").delegate("li","click",function(event){
                var target = $(event.target);
                 target.css("background-color","red");
             })
         })

on() 메서드는 매우 유사합니다. 이벤트 위임을 작성하는 데 있어 위임() 메소드에. 그리고 이벤트 위임을 실행할 때 자식 요소(본 글에서는 li)만 이벤트를 트리거하고, 상위 요소(본 글에서는 ul)는 이벤트를 트리거하지 않으므로, 트리거하는 요소 노드 이름을 판단할 필요가 없습니다. 이 이벤트는 기본 JavaScript보다 훨씬 좋습니다.

3.bind() 메소드를 사용하면 코드는 다음과 같습니다.

$(function(){
             $("#lists").bind("click","li",function(event){
                 var target = $(event.target);
                if(target.prop("nodeName")=="LI"){
                 target.css("background-color","red");}
             })
         })

bind() 메소드는 기본 JavaScript 구현 메소드와 동일합니다. 상위 요소가 하위 요소를 대신하여 이벤트를 실행합니다. 요소도 이벤트를 트리거하므로 이벤트를 트리거한 요소의 이름을 판단해야 합니다. 또한 이벤트를 요소에 바인딩하기 위해 바인딩() 메서드를 사용할 때 기존 DOM 요소에만 이벤트를 추가할 수 있으며 향후 DOM 요소에는 이벤트를 추가할 수 없다는 점에 유의하세요.

요소 추가 추가 이벤트. DOM 요소를 자주 추가하고 새로 추가된 DOM 요소에 이벤트를 바인딩하려면 live(), Delegate(), on() 및 기타 메서드를 사용하세요. jQuery는 jQuery 1.7 이후로 live() 및 Delegate() 메서드를 권장하지 않으므로 계속 on() 메서드를 사용해야 합니다.

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