JavaScript 이벤트 위임 기술 예시 분석_javascript 기술

이 글에서는 JavaScript 이벤트 위임 기술을 예시로 분석합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

전체 페이지에 많은 수의 버튼이 있는 경우 각 버튼에 이벤트 핸들러를 바인딩해야 합니다. 이는 성능에 영향을 미칩니다.

우선, 모든 함수는 객체이며, 객체가 메모리를 많이 차지할수록 성능이 저하됩니다.

둘째, DOM 방문 수가 증가하면 페이지 로딩이 지연될 수 있습니다. 실제로 이벤트 핸들러를 효과적으로 활용하는 방법에 대한 좋은 솔루션이 아직 남아 있습니다.

이벤트 대리자:

이벤트 핸들러가 너무 많은 문제에 대한 해결책은 이벤트 위임 기술입니다.

이벤트 위임 기술은 이벤트 버블링을 활용합니다. 이벤트 핸들러만 지정하면 됩니다.

이벤트를 트리거해야 하는 상위 요소에 이벤트 핸들러를 바인딩할 수 있습니다.

<ul id="mylist">    
  <li id="li_1">sdsdsd</li>    
  <li id="li_2">sdsdsd</li>    
  <li id="li_3">sdsdsd</li>
</ul>

이제 이 3개의 li에 대한 이벤트 핸들러를 바인딩해야 합니다..

ul에 이벤트 핸들러만 바인딩하면 됩니다.

obj.eventHandler($("mylist"),"click",function(e){
  e = e || window.event;
  switch(e.target.id){
//大家应该还记得target是事件目标,
//只要点击了事件的目标元素就会弹出相应的alert.
 case "li_1":
 alert("li_1");
 break;
 case "li_2":
 alert("li_2");
 break;
 case "li_3":
 alert("li_3");
 break
  }
})

복잡한 웹 애플리케이션의 경우 이러한 이벤트 위임이 매우 실용적입니다.

이 방법을 사용하지 않으면 하나씩 바인딩하면 수많은 이벤트 핸들러가 발생하게 됩니다.

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.