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

This article mainly introduces the jQuery basic event code optimization example analysis, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

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:

.. a > span > div >

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 is the 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 eventevent.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) {parentparent = 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 you have left the element, because it is very likely that the mouse is over a XUL element} catch (e) {}}. Thank you for reading this article carefully. I hope the article "sample Analysis of jQuery basic event Code Optimization" shared by the editor will be helpful to you. At the same time, I also hope that you will support and follow the industry information channel. More related knowledge is waiting for you to learn!

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.