Javascript event proxy is simpler than you think

If you want to add JavaScript interactivity to Your webpage, you may have heard of JavaScript events.
Proxy (Event
Delegation), and I think this is one of the puzzling design patterns that many JavaScript programmers are concerned about. In fact, if you already know how to add
The event handler of JavaScript makes it easy to implement event proxy.

Javascript events are the foundation of interaction between all webpages (I mean real interaction, not just the drop-down menu of those CSS
Single ). 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 it.
The higher the risk. Javascript event proxy is a simple technique. With it, you can add the event processor to a parent element, which 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 element
When a component 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; this event is always bubbling from the original element
To 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. Use event
If it is a proxy, we can add the event processor to an element and wait for an event to bubble up from its child element, it is also easy to know which element 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. If you add the event processor to these 1000 cells, a huge performance problem occurs.
It 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 send click events
Cut down and determine which cell was 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 for this table to call the editcell function. The editcell function must determine the target element of the event uploaded to the table. Test
This function may be used in several functions to be written, so we put it in 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 srcelemtn 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 can check the tag name of the target element to determine whether it is a table cell. This check may be too simple; if it is the target element Unit
What about another element in the grid? 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 to the edited cell, and check whether the specified style name exists before changing the cell to editable state. There are always a variety of options, you just need to find the one that suits your application
That one.

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 through event capture rather than event bubbling (in other browsers other than IE), but let's talk about it another day.
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.