JS-event proxy

If you want to add some JavaScript interactivity to the webpage, you may have heard of the event delegation of JavaScript and think it is the Javascript of the enthusiast level. Program Members are concerned about one of the puzzling design patterns. In fact, if you already know how to add a javascript event handler, it is easy to implement event proxy.

Javascript events are the foundation of interaction between 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. The target element of any event is the first element. In our example, it is also a button, and it appears as an attribute in our element object. With event proxy, we can add the event processor to an element, wait for an event to bubble up from its child element, and know 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 in the table. For example, I once needed to make every cell in the table editable when it was 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.

UseCodeWhat is it like?

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 needs to determine the target element of the event uploaded to the table. Considering that this function may be used in several functions to be written, we put it into a function named geteventtarget separately:

Function geteventtarget (e ){
E = E | window. event;
Return e.tar GET | 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 srcelemnt attribute, in other browsers, the target attribute is used.

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 a small modification to the Code so that it can find the parent-level TD element. 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, so we can improve performance and reduce the risk of crash.
After Dom update, you do not need to re-bind the event processor. If your page is dynamically generated, for example, with Ajax, you no longer need to add or delete event processors when 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 by event capture rather than event bubbling (in browsers other than IE ).
Note some points 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. Once necessary, event proxy will be a handy tool in your toolbox, and it is easy to implement.

This article from the csdn blog, reproduced please indicate the source: http://blog.csdn.net/weinideai/archive/2009/01/19/3835839.aspx