Detailed explanation of JavaScript event proxies and delegates_javascript skills

In JavaScript, Agent and Delegate often appear.

So under what circumstances is it used? What is its principle?

Here we introduce the usage and principle of javascript delegate, as well as the delegate interface in Dojo, jQuery and other frameworks.

JavaScript Event Proxy
Event proxies are a very useful and interesting feature in the JS world. When we need to add events to many elements, we can trigger the handler function by adding the event to their parent node and delegating the event to the parent node.

This is mainly due to the browser's event bubbling mechanism. Let's give a specific example to explain how to use this feature.

This example is mainly taken from David Walsh’s related article (How JavaScript Event Delegation Works).

Suppose there is a parent node of UL, which contains many child nodes of Li:

<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>

When our mouse moves over Li, we need to obtain the relevant information of this Li and pop up a floating window to display detailed information, or when a Li is clicked, the corresponding processing event needs to be triggered.

Our usual way of writing is to add some event listeners like onMouseOver or onClick to each 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]);
   } 
 }

If the Li sub-elements in this UL are frequently added or deleted, we need to call the addListenersLi method every time Li is added to add an event handler for each Li node.

This will make the adding or deleting process complex and the possibility of errors.

The solution to the problem is to use the event proxy mechanism. When the event is thrown to the upper parent node, we determine and obtain the event source Li by checking the target object (target) of the event.

The following code can achieve the desired effect:

/ 获取父节点，并为它添加一个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!");
 }
});

Add a click event to the parent node. When the child node is clicked, the click event will bubble up from the child node. After the parent node captures the event, it determines whether it is the node we need to process by judging e.target.nodeName. And get the clicked Li node through e.target. In this way, the corresponding information can be obtained and processed.

Event bubbling and capturing
Browser event bubbling mechanism. Different browser manufacturers have different processing mechanisms for capturing and processing events. Here we introduce the standard events defined by W3C for DOM2.0.

The DOM2.0 model divides the event processing process into three stages:

1. Event capture phase,

2. Event target stage,

3. Event bubbling stage.

As shown below:

Event capture: When an element triggers an event (such as onclick), the top-level object document will emit an event stream, which will flow to the target element node along with the nodes of the DOM tree until it reaches the target element where the event actually occurs. . During this process, the corresponding listening function of the event will not be triggered.

Event target: After reaching the target element, execute the corresponding processing function of the event of the target element. If no listening function is bound, it will not be executed.

Event bubbling: starting from the target element and propagating to the top-level element. If there are nodes bound to corresponding event processing functions on the way, these functions will be triggered at once. If you want to prevent events from bubbling, you can use e.stopPropagation() (Firefox) or e.cancelBubble=true (IE) to prevent event bubbling.

delegate function in jQuery and Dojo
Let's take a look at how to use the event proxy interface provided in Dojo and jQuery.

jQuery:

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

jQuery’s delegate method requires three parameters, a selector, a time name, and an event handler.

Dojo is similar to jQuery, the only difference is in the programming style:

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’s delegate module is in dojox.NodeList. It provides the same interface as jQuery and the same parameters.

Through delegation, you can realize several benefits of using event delegation for development:

1. There are fewer management functions. There is no need to add a listener function for each element. For similar child elements under the same parent node, events can be handled by delegating them to the listening function of the parent element.

2. You can easily add and modify elements dynamically, and there is no need to modify event bindings due to changes in elements.

3. There are fewer connections between JavaScript and DOM nodes, which reduces the probability of memory leaks caused by circular references.

Using proxies in JavaScript programming
The above introduction is to use the browser bubbling mechanism to add event proxies to DOM elements when processing DOM events. In fact, in pure JS programming, we can also use this programming model to create proxy objects to operate target objects.

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();

In the above example, the modification of a is performed by calling the proxy function d created by the delegate() function.

Although this method uses apply (call can also be used) to realize the transfer of the calling object, it hides certain objects from the programming mode and can protect these objects from being accessed and modified casually.

The concept of delegation is used in many frameworks to specify the running scope of methods.

Typical ones include dojo.hitch(scope, method) and ExtJS’s createDelegate(obj, args).

The above is the entire content of this article. I hope it will be helpful to everyone in learning javascript programming.