자바스크립트 성능 최적화를 위한 이벤트 위임 예시에 대한 자세한 설명

본 글은 자바스크립트 성능 최적화의 이벤트 위임을 예시를 통해 분석한 것입니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

아래 각 LI에 대한 클릭 이벤트 바인딩

Go somewhereDo somethingSay hi

1. 전통 글쓰기

var item1=document.getElementById("goSomewhere");
var item2=document.getElementById("doSomething");
var item3=document.getElementById("sayHi");
item1.onclick = function(){
  console.log('goSomewhere');
}
item2.onclick = function(){
  console.log('doSomething');
}
item3.onclick = function(){
  alert("hello");
}

JavaScript에서는 페이지에 추가되는 이벤트 핸들러의 수가 페이지의 전반적인 실행 성능과 직접적인 관련이 있습니다. 성능.

다음과 같은 이유가 있습니다.

1. 모든 함수는 객체이며 메모리를 많이 차지할수록 성능이 저하됩니다.
2. 모든 이벤트 핸들러를 미리 지정해야 함으로써 발생하는 DOM 액세스 횟수로 인해 전체 페이지의 대화형 준비 시간이 지연됩니다.

2. 이벤트 위임

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

이벤트 위임은 이벤트 버블링을 사용하여 하나의 이벤트 핸들러만 지정하여 특정 유형의 모든 이벤트를 관리합니다. 예를 들어 클릭 이벤트는 문서 수준까지 버블링됩니다. 즉, 클릭 가능한 각 요소에 대해 이벤트 핸들러를 추가할 필요 없이 전체 페이지에 대한 onclick 이벤트 핸들러를 지정할 수 있습니다.

이벤트 위임 방법:

var list=document.getElementById("myLinks");
list.onclick = function(e){
  var target = e.target;  
  switch(target.id){
   case "goSomewhere":
    console.log('goSomewhere');
    break; 
   case "doSomething":
    console.log('doSomething');
    break; 
   case "sayHi":
    alert("hello");
    break; 
  }
}

3. 이벤트 위임 사용의 장점:

1) 문서 개체는 빠르게 액세스할 수 있으며 페이지 수명 주기의 어느 시점에서나 이벤트 핸들러를 추가할 수 있습니다(DOMContentLoaded 또는 로드 이벤트를 기다리지 않고). 즉, 클릭 가능한 요소가 페이지에 렌더링되자마자 즉시 작동합니다.

2) 페이지에서 이벤트 핸들러를 설정하는 데 더 적은 시간이 소요됩니다. 이벤트 핸들러를 하나만 추가하면 DOM 참조가 더 적게 필요하고 시간도 덜 걸립니다.

3) 전체 페이지가 메모리 공간을 덜 차지하므로 전반적인 성능이 향상될 수 있습니다.

이 글이 JavaScript 프로그래밍에 종사하는 모든 분들께 도움이 되기를 바랍니다.

【관련 추천 튜토리얼】

1. JavaScript 동영상 튜토리얼
2. JavaScript 온라인 매뉴얼
3. 부트스트랩 튜토리얼