Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to realize the event agent in JavaScript". The editor shows you the operation process through the actual case. The operation method is simple, fast and practical. I hope this article "how to realize the event agent in JavaScript" can help you solve the problem.

The JavaScript event broker is a simple technique that allows you to add event handlers to a parent element, thus avoiding adding event handlers to multiple child elements.

How does it work?

The event broker uses two features that are often overlooked in JavaSciprt events: event bubbles and target elements. When an event on an element is triggered, such as a mouse click on a button, the same event will be triggered in all ancestor elements of that element. This process is called event bubbling; this event bubbles from the original element to the top of the DOM tree. For any event, the target element is the original element, which in our case is the button. The target element appears as an attribute in our event object. Using an event broker, we can add an event handler to an element, wait for the event to bubble up from its child elements, and easily tell which element the event started from.

What's in it for me?

Imagine that we now have a HTML table with 10 columns and 100 rows. What do you want to do when the user clicks on a cell? For example, once I needed to make every cell in the table editable when clicked. Adding event handlers to these 1000 cells will cause a big performance problem and may lead to memory leaks and even browser crashes. Instead, with an event broker, you only need to add an event handler to the table element, which can truncate the click event and determine which cell was clicked.

What does it look like if you write it in code?

The code is simple, and all we have to care about is how to detect the target element. For example, we have a table element, ID is "report", and we add an event handler to the table to call the editCell function. The editCell function needs to determine the target element of the event that is sent to the table. Considering that this feature may be reused in the function we are writing, we put it separately in a function called getEventTarget:

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

The e variable represents an event object, and 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.

Next comes the editCell function, which calls the getEventTarget function. Once we have the target element, all that remains 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 determine whether it is a table cell by checking the tag name of the target element. This check may be a bit 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 don't need to be edited? In this case, we can add a specified style name to those non-editable cells, and then check that the cell does not contain that style name before making it editable. There are always a variety of choices, and you just need to find the one that suits your application.

What are the advantages and disadvantages?

The benefits of JavaScript event agents are:

◆ has fewer event handlers that need to be created and reside in memory. It's important that we get a performance improvement while reducing the risk of a crash.

◆ does not need to rebind the event handler after the DOM update. If your page is generated dynamically, for example through Ajax, you no longer need to add or remove event handlers when elements are loaded or unloaded.

The potential problems with ◆ may not be obvious, but once you notice them, you can easily avoid them:

◆ your event management code is at risk of becoming a performance bottleneck, so try to keep it short.

Not all events in ◆ 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 non-IE browsers), but let's talk about it another time.

◆ has some things to pay attention to when managing mouse events. You are at high risk of running into performance bottlenecks if your code handles mousemove events, because mousemove events are triggered very frequently. Mouseout, on the other hand, is difficult to manage with event agents because of its strange performance.

This is the end of the introduction to "how JavaScript implements event agents". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.