How to use JavaScript event proxy

JavaScript events are the foundation of interaction among all webpages. I mean real interaction, not just those CSS drop-down menus ). In traditional event processing, you add or delete event processors for each element as needed. However, the event processor may cause memory leakage or performance degradation-The more you use, the greater the risk.

JavaScript event proxy is a simple technique in which you can add an event processor to a parent element, this avoids adding the event processor to multiple child-level elements.

How does it work?

The event proxy uses two features that are often ignored in the JavaSciprt event: Event bubbles and target elements. When an event on an element is triggered, for example, if you click a button, the same event will be triggered in all the ancestor elements of that element. This process is called event bubbling, which starts from the original element until the top layer of the DOM tree. For any event, the target element is the original element. In our example, the button is used. The target element appears as an attribute in our event object. With event proxy, we can add the event processor to an element and wait for the event to bubble up from its child element, in addition, you can easily determine the element from which the event starts.

What is the benefit to me?

Imagine that we have an HTML table with 10 columns and 100 rows. What do you want to do when you click a cell. For example, one time, I need to make every cell in the table editable when it is clicked. Adding the event processor to these 1000 cells may cause a major performance problem and may cause memory leakage or even browser crash. On the contrary, to use event proxy, you only need to add an event processor to the table element. This function can intercept click events, and determine which cell is clicked.

What is written in code?

The code is simple. All we need to care about is how to detect the target element. For example, we have a table element whose ID is "report". We add an event processor to this table to call the editCell function. The editCell function must determine the target element of the event uploaded to the table. Considering that the function we want to write may be used repeatedly, we put it in a function named getEventTarget separately:

function getEventTarget(e) { e = e || window.event; return e.target || e.srcElement;}

E indicates an event object. We only need to write a little cross-browser code to return the target element. In IE, the target element is placed in the srcElement attribute, while in other browsers, It is the target attribute.

The next step is the editCell function, which calls the getEventTarget function. Once we get the target element, the rest is to see if it is the one we need.

function editCell(e) { var target = getEventTarget(e); if(target.tagName.toLowerCase() === 'td') { // DO SOMETHING WITH THE CELL }}

In the editCell function, we check the tag name of the target element to determine whether it is a table cell. This check may be too simple. What if it is another element in the target element cell? We need to make some quick changes to the Code so that it can find the parent td element we need. What if some cells do not need to be edited? In this case, we can add a specified style name for uneditable cells, and then check whether the style name is not included before the cell is editable. You only need to find the one that suits your application.

What are the advantages and disadvantages?

The benefits of JavaScript event proxy include:

◆ Fewer event processors need to be created and resident in the memory. This is very important. We have improved our performance and reduced the risk of crash.

◆ After DOM update, you do not need to re-bind the event processor. If your page is dynamically generated, such as Ajax, you do not need to add or delete event processors when the elements are loaded or uninstalled.

◆ Potential problems may not be so obvious, but once you notice these problems, you can easily avoid them:

◆ Your Event Management Code has the risk of becoming a performance bottleneck, so try to make it short and concise.

◆ Not all events can bubble up. Blur, focus, load, and unload cannot bubble like other events. In fact, blur and focus can be obtained in a non-IE browser using event capture rather than event bubbling), but let's talk about it another day.

◆ Notes when managing mouse events. If your code processes the mousemove event, you may encounter a high performance bottleneck, because the mousemove event is triggered very frequently. Mouseout is difficult to manage by event proxy because of its weird performance.

Summary

Some examples of event proxies using mainstream class libraries have emerged, such as jQuery, Prototype, and Yahoo! UI. You can also find examples that do not use any class libraries, such as this one on Usable Type blog.

When you need it, event proxy will become a handy tool in your toolbox, and it is really easy to implement.

1. Abstract Factory and factory method pattern of JavaScript Design Pattern
2. Summary of Javascript development knowledge
3. Javascript object-oriented basics and implementation of interfaces and inheritance classes
4. Update UpdatePanel using JavaScript