JavaScript 이벤트 프록시 및 프록시 인스턴스 사용법 자세한 설명-JS 튜토리얼-php.cn

JavaScript 이벤트 프록시 및 프록시 인스턴스 사용법 자세한 설명

伊谢尔伦

풀어 주다： 2017-07-22 16:38:56

원래의

1489명이 탐색했습니다.

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 노드를 가져옵니다. 이러한 방식으로 해당 정보를 획득하고 처리할 수 있습니다.

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 프로그래밍에서는 이 프로그래밍 모델을 사용하여 대상 개체를 작동하는 프록시 개체를 생성할 수도 있습니다. 객체의 수정.

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

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

일반적인 것은 dojo.hitch(scope, method) 및 ExtJS의 createDelegate(obj, args)입니다.

위 내용은 JavaScript 이벤트 프록시 및 프록시 인스턴스 사용법 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!