자바스크립트의 이벤트 프록시에 대한 간략한 분석

이 글의 주요 내용은 제가 최근 한 회사의 웹 프론트엔드 개발 포지션 면접에서 했던 배열 중복 제거 문제 해결 아이디어를 바탕으로 작성되었으며, 이를 여러분과 공유하고자 합니다. .

질문 자체는 매우 간단합니다. ul에는 1,000개의 li이 있습니다. 마우스 클릭 이벤트를 이 1,000개의 li에 바인딩하는 방법은 li의 내용과 위치 좌표를 나타냅니다. xy of the li가 경고됩니다.

123...1000

브라우저 호환성, 이벤트 버블링, 효율성 및 기타 문제를 고려해야 합니다. 질문을 보고 다음과 같은 답을 종이에 직접 적었습니다.

var ulItem = document.getElementById("ulItem");
var lis = document.getElementsByTagName("li");
for(var i=0; i<lis.length; i++){
 lis[i].onclick = function(){
 alert("内容："+this.innerHTML);
 alert("位置："+getElementPosition(this).x+","+getElementPosition(this).y;
 }
}
function getElementPosition(e){
 var x=0,y=0;
 while(e != null){
 x += e.offsetLeft;
 y += e.offsetTop;
 e = e.offsetParent;
 }
　　return {x:x, y:y};
}

면접 결과: 다 쓰고 나서 다시 읽어보니 그런 게 있더라고요. 호환성을 고려할 필요가 없습니다. 효율성에 대해서는 고민을 하다가 어떻게 개선해야 할지 생각이 나지 않아서 그냥 면접관에게 보여줬어요. 인터뷰어도 매우 친절했습니다. 읽은 후 그는 "내가 언급한 핵심 사항을 고려하지 않았습니다. 루프에 클릭 이벤트를 1,000번 추가하는 것은 매우 비효율적입니다. "라고 말했습니다. 그러다가 효율성을 높이기 위해 이벤트 버블링 기능, 즉 이벤트 프록시를 사용하는 방법에 대해 이야기해 주었습니다(ps: 예전에 프로젝트를 할 때 이벤트 버블링을 막아야 했던 경우가 있었는데, 효율성을 높이기 위해 이벤트 버블링 기능을 사용하게 되면서 전혀 이루어지지 않았습니다.) 면접관님 말씀을 듣고 신나서 다시 인터넷으로 확인해 봤습니다. 이제 학습 과정을 기록으로 정리하겠습니다.

이벤트 위임 , 이벤트 위임이라고도 합니다. 은 JavaScript에서 이벤트를 바인딩하는 일반적인 기술입니다. 이름에서 알 수 있듯이 "이벤트 프록시"는 원래 상위 요소에 바인딩되어야 하는 이벤트를 위임하여 상위 요소가 이벤트 리스너의 역할을 맡을 수 있도록 합니다.

왜 이러는 걸까요? 우리 모두 알고 있듯이 DOM 작업은 성능을 많이 소모하므로 반복적인 이벤트 바인딩은 단순히 성능을 저하시킵니다. 이벤트 프록시의 핵심 아이디어는 가능한 적은 바인딩을 통해 최대한 많은 이벤트를 모니터링하는 것입니다. 프로그래머의 경우 코드가 없으면 그냥 J8이라고 하겠습니다. 코드는 아래에 게시되어 있습니다.

var ulItem = document.getElementById("ulItem");
ulItem.onclick = function(e){
 e = e || window.event;//这一行和下一行是为了兼容IE8以及之前版本
 var target = e.target || e.srcElement;
 if(target.tagName.toLowerCase() === "li"){
 alert(target.innerHTML);
 alert("位置为："+getElementPosition(target).x+","+getElementPosition(target).y);
 }
}
function getElementPosition(e){
 var x=0,y=0;
 while(e != null){
 x += e.offsetLeft;
 y += e.offsetTop;
 e = e.offsetParent;
 }
　　return {x:x, y:y};
}

자, 이제 코드에서 for 루프가 제거되었습니다. 효율성이 향상되고 호환성이 있는 섹스 치료에 관해서는 이 답변이 적절해야 한다고 생각합니다. 위에서 말한 내용은 단지 필기 시험 문제에 대한 것입니다. 이벤트 에이전트:

전통적인 이벤트 처리에서는 필요에 따라 각 요소에 대한 이벤트 핸들러를 추가하거나 제거합니다. 그러나 이벤트 핸들러는 메모리 누수 또는 성능 저하를 일으킬 가능성이 있습니다. 사용할수록 위험은 증가합니다. JavaScript 이벤트 위임은 상위 요소에 이벤트 핸들러를 추가할 수 있는 간단한 기술이므로 여러 하위 요소에 이벤트 핸들러를 추가할 필요가 없습니다. 이벤트 프록시는 JavaScript 이벤트에서 종종 간과되는 두 가지 기능인 이벤트 버블링과 대상 요소를 사용합니다. 버튼을 마우스로 클릭하는 것과 같이 요소에서 이벤트가 트리거되면 해당 요소의 모든 상위 요소에서 동일한 이벤트가 트리거됩니다. 이 프로세스를 이벤트 버블링이라고 합니다. 이벤트는 원래 요소에서 DOM 트리의 맨 위로 올라갑니다. 모든 이벤트의 대상 요소는 첫 번째 요소(이 경우에는 버튼)이며 이벤트 개체의 속성으로 나타납니다. 이벤트 프록시를 사용하면 요소에 이벤트 핸들러를 추가하고, 하위 요소에서 이벤트가 버블링될 때까지 기다리며, 이벤트가 시작된 요소를 알 수 있습니다.

이벤트 프록시에 관해서도 오늘이 처음 접하는 날이므로 먼저 이 글을 작성하겠습니다. 더 많은 관련 튜토리얼을 보려면 JavaScript 비디오 튜토리얼을 방문하세요. !