JavaScript 이벤트 프록시 및 Delegates_javascript 기술에 대한 자세한 설명

자바스크립트에는 Agent와 Delegate가 자주 등장합니다.

그럼 어떤 상황에서 사용되나요? 그 원리는 무엇입니까?

여기에서는 Dojo, jQuery 및 기타 프레임워크의 대리자 인터페이스뿐만 아니라 javascript 대리자의 사용법과 원리를 소개합니다.

JavaScript 이벤트 프록시
이벤트 프록시는 JS 세계에서 매우 유용하고 흥미로운 기능입니다. 많은 요소에 이벤트를 추가해야 하는 경우 이벤트를 해당 요소의 상위 노드에 추가하고 해당 이벤트를 상위 노드에 위임하여 핸들러 기능을 트리거할 수 있습니다.

이는 주로 브라우저의 이벤트 버블링 메커니즘으로 인해 발생합니다. 이 기능을 사용하는 방법을 설명하기 위해 구체적인 예를 들어보겠습니다.

이 예시는 주로 David Walsh의 관련 기사(JavaScript 이벤트 위임 작동 방식)에서 발췌한 것입니다.

Li의 많은 하위 노드를 포함하는 UL의 상위 노드가 있다고 가정합니다.

<ul id="list">
 <li id="li-1">Li 1</li>
 <li id="li-2">Li 2</li>
 <li id="li-3">Li 3</li>
 <li id="li-4">Li 4</li>
 <li id="li-5">Li 5</li> 
</ul>

Li 위로 마우스를 이동하면 해당 Li의 관련 정보를 얻고 부동 창을 팝업하여 자세한 정보를 표시해야 하며, Li를 클릭하면 해당 처리 이벤트가 트리거되어야 합니다.

일반적인 작성 방법은 onMouseOver 또는 onClick과 같은 일부 이벤트 리스너를 각 Li에 추가하는 것입니다.

function addListenersLi(liElement) {
  liElement.onclick = function clickHandler() {
   //TODO
  };
  liElement.onmouseover = function mouseOverHandler() {
   //TODO
  }
 }

 window.onload = function() {
  var ulElement = document.getElementById("list");
  var liElements = ulElement.getElementByTagName("Li");
   for (var i = liElements.length - 1; i >= 0; i--) {
    addListenersLi(liElements[i]);
   } 
 }

이 UL의 Li 하위 요소가 자주 추가되거나 삭제되는 경우 Li가 추가될 때마다 addListenersLi 메서드를 호출하여 각 Li 노드에 대한 이벤트 핸들러를 추가해야 합니다.

이렇게 하면 추가나 삭제 과정이 복잡해지고 오류가 발생할 가능성이 있습니다.

문제 해결 방법은 이벤트 프록시 메커니즘을 사용하는 것입니다. 상위 상위 노드에 이벤트가 발생하면 해당 이벤트의 대상 개체(target)를 확인하여 이벤트 소스 Li를 결정하고 얻습니다.

다음 코드는 원하는 효과를 얻을 수 있습니다.

/ 获取父节点，并为它添加一个click事件
document.getElementById("list").addEventListener("click",function(e) {
 // 检查事件源e.targe是否为Li
 if(e.target && e.target.nodeName.toUpperCase == "LI") {
 // 
 //TODO
 console.log("List item ",e.target.id," was clicked!");
 }
});

상위 노드에 클릭 이벤트를 추가합니다. 하위 노드를 클릭하면 하위 노드에서 클릭 이벤트가 발생합니다. 상위 노드는 이벤트를 캡처한 후 e.target.nodeName을 판단하여 처리해야 하는 노드인지 여부를 결정합니다. 그리고 e.target을 통해 클릭된 Li 노드를 가져옵니다. 이러한 방식으로 해당 정보를 획득하고 처리할 수 있습니다.

이벤트 버블링 및 캡처
브라우저 이벤트 버블링 메커니즘 브라우저 제조업체마다 이벤트 캡처 및 처리를 위한 서로 다른 처리 메커니즘이 있습니다. 여기에서는 DOM2.0에 대해 W3C에서 정의한 표준 이벤트를 소개합니다.

DOM2.0 모델은 이벤트 처리 프로세스를 세 단계로 나눕니다.

1. 이벤트 캡쳐 단계

2. 이벤트 대상 스테이지

3. 이벤트 버블링 스테이지.

아래 그림과 같습니다.

이벤트 캡처: 요소가 이벤트(예: onclick)를 트리거하면 최상위 개체 문서는 이벤트 스트림을 내보냅니다. 이 이벤트 스트림은 DOM 트리의 노드와 함께 대상 요소 노드로 흐릅니다. 이벤트가 실제로 발생하는 대상 요소입니다. 이 프로세스 중에는 이벤트의 해당 청취 기능이 트리거되지 않습니다.

이벤트 대상: 대상 요소에 도달한 후 대상 요소의 이벤트에 해당하는 처리 기능을 실행합니다. 바인딩된 청취 기능이 없으면 실행되지 않습니다.

이벤트 버블링: 대상 요소에서 시작하여 최상위 요소로 전파됩니다. 도중에 해당 이벤트 처리 기능에 바인딩된 노드가 있으면 해당 기능이 즉시 트리거됩니다. 이벤트 버블링을 방지하려면 e.stopPropagation()(Firefox) 또는 e.cancelBubble=true(IE)를 사용하여 이벤트 버블링을 방지할 수 있습니다.

jQuery와 Dojo의 위임 기능
Dojo와 jQuery에서 제공하는 이벤트 프록시 인터페이스를 사용하는 방법을 살펴보겠습니다.

jQuery:

$("#list").delegate("li", "click", function(){
 // "$(this)" is the node that was clicked
 console.log("you clicked a link!",$(this));
});

jQuery의 대리자 메서드에는 선택기, 시간 이름, 이벤트 핸들러라는 세 가지 매개 변수가 필요합니다.

Dojo는 jQuery와 유사하지만 유일한 차이점은 프로그래밍 스타일입니다.

require(["dojo/query","dojox/NodeList/delegate"], function(query,delegate){

 query("#list").delegate("li","onclick",function(event) {
 // "this.node" is the node that was clicked
 console.log("you clicked a link!",this);
 });
})

Dojo의 위임 모듈은 dojox.NodeList에 있습니다. jQuery와 동일한 인터페이스와 동일한 매개변수를 제공합니다.

위임을 통해 개발에 이벤트 위임을 사용하면 다음과 같은 여러 가지 이점을 얻을 수 있습니다.

1. 관리 기능이 적습니다. 각 요소에 대해 리스너 함수를 추가할 필요가 없습니다. 동일한 상위 노드 아래 유사한 하위 요소의 경우 이벤트를 상위 요소의 수신 기능에 위임하여 이벤트를 처리할 수 있습니다.

2. 요소를 동적으로 쉽게 추가하고 수정할 수 있으며, 요소 변경으로 인해 이벤트 바인딩을 수정할 필요가 없습니다.

3. JavaScript와 DOM 노드 사이의 연결이 적어서 순환 참조로 인한 메모리 누수 가능성이 줄어듭니다.

JavaScript 프로그래밍에서 프록시 사용
위의 소개는 DOM 이벤트를 처리할 때 브라우저 버블링 메커니즘을 사용하여 DOM 요소에 이벤트 프록시를 추가하는 것입니다. 실제로 순수 JS 프로그래밍에서는 이 프로그래밍 모델을 사용하여 대상 개체를 작동하는 프록시 개체를 생성할 수도 있습니다.

var delegate = function(client, clientMethod) {
  return function() {
   return clientMethod.apply(client, arguments);
  }
 }
 var Apple= function() {
  var _color = "red";
  return {
   getColor: function() {
    console.log("Color: " + _color);
   },
   setColor: function(color) {
    _color = color;
   }
  };
 };

 var a = new Apple();
 var b = new Apple();
 a.getColor();
 a.setColor("green");
 a.getColor();
 //调用代理
 var d = delegate(a, a.setColor);
 d("blue");
 //执行代理
 a.getColor();
 //b.getColor();

위의 예에서 a의 수정은 Delegate() 함수에 의해 생성된 프록시 함수 d를 호출하여 수행됩니다.

이 방법은 적용(호출도 사용할 수 있음)을 사용하여 호출 개체의 전송을 실현하지만 프로그래밍 모드에서 특정 개체를 숨기고 이러한 개체에 우연히 액세스하거나 수정하는 것을 방지할 수 있습니다.

위임 개념은 많은 프레임워크에서 메서드의 실행 범위를 지정하는 데 사용됩니다.

일반적인 것에는 dojo.hitch(scope, method) 및 ExtJS의 createDelegate(obj, args)가 포함됩니다.

이상 내용이 이 글의 전체 내용입니다. 자바스크립트 프로그래밍을 배우시는 모든 분들께 도움이 되었으면 좋겠습니다.