Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to understand the basic events of jQuery code optimization". In daily operation, I believe many people have doubts about how to understand the basic events of jQuery code optimization. The editor has consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful for you to answer the questions of "how to understand the basic events of jQuery code optimization". Next, please follow the editor to study!

Event model

Speaking of events, it can be traced back to 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 the de facto standard. Netscape implements an event capture 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 relevant elements have different priorities for handling (responding) the event.

The following examples illustrate the differences between the two event mechanisms. Suppose the document has the following structure:

...

Because these three elements are nested, when you click a, you actually click span and div. In other words, all three elements should have the opportunity to handle click events. Under the event capture mechanism, the priority for handling the click event is div > span > a, while under the event bubbling mechanism, the priority for handling the click event is a > span > div.

Later, the W3C specification required browsers to support both capture and bubbling mechanisms, and allowed developers to choose which stage to register the event to. So here's a standard way to register an event:

Target.addEventListener (type, listener, useCapture Optional)

Where:

◆ type: a string that represents the type of event being monitored

◆ listener: listener object (JavaScript function), which can be notified when a specified event occurs

◆ useCapture: Boolean value, whether to register to the capture phase

In real-world application development, to ensure compatibility with IE (because it does not support capture), useCapture is generally specified as false (the default is also false). In other words, only events are registered to the bubbling phase; for the simple example above, the response order is a > span > div.

The side effects of bubbling

As mentioned earlier, IE's bubbling event model has basically become the de facto standard. But bubbling has a side effect.

Still take the previous document structure as an example, assuming it is a menu item in the interface, and we want the user to hide the menu when the mouse leaves the div. So we registered a mouseout event with div. If the user left the mouse from div, then everything is correct. If the user's mouse is removed from an or span, the problem arises. Because the event bubbles, mouseout events dispatched from these two elements propagate to div, causing the menu to be hidden in advance without the mouse leaving the div.

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

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 an excerpt from jQuery's internal function withinElement, which provides support for mouseenter and mouseleave. Translated the notes, just for your reference.

/ / the following function is used to detect whether the event occurs inside another element / / use var withinElement = function (event) {/ / detect mouse (over | out) in jQuery.event.special.mouseenter and mouseleave handlers to see if var parent = event.relatedTarget; / / sets the correct event type event.type = event.data within the same parent element. / / Firefox sometimes assigns relatedTarget to a XUL element / / for this element, the parentNode attribute try {/ / Chrome is not accessible. Although the parentNode attribute / / can be accessed, the result is null if (parent & & parent! = document & &! parent [XSS _ clean]) {return } / / while up the DOM tree (parent & & parent! = = this) {parent = parent [XSS _ clean];} if (parent! = = this) {/ / if it actually happens to be on a non-child element, then handle the event jQuery.event.handle.apply (this, arguments) } / / assume that the element has been left, because it is likely that the mouse is over a XUL element} catch (e) {}}, so the study of "how to understand the basic events of jQuery code optimization" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

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.