Basic events of jQuery code optimization

Event Model

Speaking of events, we have to trace the "browser war" between Netscape and Microsoft. At that time, there was no standard for the event model, and the implementation of the two companies was a fact standard. Netscape implements an "event capture" Event System in Navigator, while Microsoft implements a basically opposite Event System in IE, called "event bubbling ". The difference between the two systems is that when an event occurs, the priority of relevant elements for processing (response) events is different.

The following examples illustrate the differences between the two event mechanisms. Assume that the document has the following structure:
Copy codeThe Code is as follows:
<Div>
<Span>
<A>... </a>
</Span>
</Div>

Because these three elements are nested, clicking a actually clicks span and div. In other words, all three elements should have the opportunity to process click events. Under the event capture mechanism, the priority for processing this click event is: div> span> a. Under the event bubble mechanism, the priority for processing this click event is: a> span> div.

Later, W3C specifications required the browser to support both capture and bubble mechanisms, and allowed developers to select the stage at which the event was registered. So we have the following standard method for registering an event:

Target. addEventListener (type, listener, useCapture Optional );

Where:

◆ Type: String, indicating the event type of the listener

◆ Listener: listener object (JavaScript function), which can receive notifications when a specified event occurs.

◆ UseCapture: Boolean value, whether to register to the capture stage

In actual application development, useCapture is generally set to false to ensure compatibility with IE (because it does not support capture). The default value is false ). In other words, only register the event to the bubble stage. For the simple example above, the response sequence is: a> span> div.

Side effects of bubbling

As mentioned above, the bubble event model of IE is basically a de facto standard. But bubbling has a side effect.

Taking the preceding document structure as an example, if it is a menu item in the interface, we want the user to hide the menu when the mouse leaves the div. Therefore, we registered a mouseout event for the div. If the user's mouse leaves the div, everything is correct. If the user's mouse leaves a or span, the problem arises. Because the events are bubbling, The mouseout events dispatched from these two elements will be propagated to the div, causing the mouse to not leave the div, And the menu will be hidden in advance.

Of course, the side effects of bubbling are not hard to avoid. For example, register a mouseout event for each element in the div and use the. stopPropagation () method to prevent further event propagation. For IE, you must set the cancelBubble attribute of the event object to false to cancel event bubbling. However, this is still the way back to dealing with browser incompatibility issues.

Optimization Scheme

To avoid the side effects of bubbling, jQuery provides mouseenter and mouseleave events, so use them instead of mouseover and mouseout.

The following is taken from jQuery's internal function withinElement, which provides support for mouseenter and mouseleave. Translated comments for your reference only.
Copy codeThe Code is as follows:
// The following function is used to check whether an event occurs inside another element.
// Used in the jQuery. event. special. mouseenter and mouseleave handlers
Var withinElement = function (event ){
// Checks whether the mouse (over | out) is still in the same parent element.
Var parent = event. relatedTarget;
// Set the correct Event Type
Event. type = event. data;
// Firefox sometimes specifies an XUL element for relatedTarget.
// For this element, the parentNode attribute cannot be accessed.
Try {
// Similar to Chrome, although the parentNode attribute can be accessed
// But the result is null
If (parent & parent! = Document &&! Parent. parentNode ){
Return;
}
// Go up along the DOM tree
While (parent & parent! = This ){
Parent = parent. parentNode;
}
If (parent! = This ){
// If it is located on a non-child element, it is better to process the event.
JQuery. event. handle. apply (this, arguments );
}
// Assume that the element has been left, because it is likely that the mouse is placed on an XUL element.
} Catch (e ){}
},

Conclusion

In jQuery, you can use the mouseenter and mouseleave events to avoid the side effects of event bubbling.
Original article: http://www.ituring.com.cn/article/420