Analysis of JS bubble Characteristics

Javasrt RT events have two important features: Event bubbling and target elements. Event bubbling: when an event on an element is triggered, for example, if you click a button, the same event will be triggered among all the ancestor elements of that element. This process is called event bubbling... SyntaxHighlighter. all ();

Javasrt RT events have two important features: Event bubbling and target elements.

Event bubbling: when an event on an element is triggered, for example, if you click a button, the same event will be triggered among 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.

Target element: 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 and wait for an event to bubble up from its child element, it is also easy to know which element the event starts.

Event bubbling and capturing

Capture is from the upper-level element to the lower-level element, and bubble is from the lower-level element to the upper-level element.

In IE, each element and window object have two methods: attachEvent () and detachEvent (). AttachEvent () is used to attach an event handler to an event. DetachEvent () is used to separate event processing functions. Eg.

Var fnClick = function (){

Alert ("Clicked !");

}

Var oDiv = document. getElementById ("div1 ");

ODiv. attachEvent ("onclick", fnClick );

ODiv. detachEvent ("onclick", fnClick );
What are the benefits of event bubbling?

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.

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 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 srcElemtn attribute or event. in the toElement attribute, while in other browsers, It is the target or event. relatedTarget 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 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.

Advantages and disadvantages of event bubbling:

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

2. You do not need to re-bind the event processor after DOM update.

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

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.

How to Avoid event bubbling:

1. Method

Event bubbling in JS