A detailed explanation of DOM event binding usage in jquery

After the document is loaded, if you intend to do something for the element-binding event, you can use the bind () method to bind the matching element to a specific event, and the Bind () method is called in the following format:

Bind (Type [, data], FN);

The bind () method has 3 parameters, as described below.

The 1th parameter is the event type, which includes: Blur, focus, load, resize, scroll, unload, click, DblClick, MouseDown, MouseUp, MouseMove, MouseOver, Mouseout, MouseEnter, MouseLeave, change, select, Submit, KeyDown, KeyPress, KeyUp, and error, of course, can also be custom names.
The 2nd parameter is an optional parameter that is passed as the Event.data property value to the event object's additional data object.
The 3rd parameter is a metric-bound handler.

As you can see, the event binding type in jquery is less "on" than the normal JavaScript event binding type. For example, the mouse click event corresponds to the Click event in Jquer, and the onclick () function corresponds to JavaScript.

As required, you need to complete the following steps.

1. Wait for the DOM to finish loading.
2. Locate the element that contains the title, and bind the click event.
3. Locate the content element and display the content element.

1 2 3 4 5 6 7 8 9 10

$ (function () {$ ("#panel h5.head"). Bind ("click", Function () {var $content = $ (this). Next (); if ($content. Is (": visible")) {$content. Hide ();} Else{$content. Show ();}) })

As with the Ready () method, the Bind () method can also be invoked multiple times.

The above jquery code has a keyword this, as in JavaScript, this refers to the DOM element that carries the appropriate behavior. For this DOM element to be able to use the method in jquery, you can use $ (this) to convert it to a jquery object.

To determine whether an element is displayed, you can use the IS () method in jquery to complete it. In code, $ (this). Next ("Div.content") is found to be used more than once, so you can define a local variable for it: $content.

In the example above, the event type that is bound to the element is click, which triggers the bound event when the user clicks, and then executes the function code of the event. Now replace the event type with mouseover and mouseout, which triggers the event when the cursor has slipped. The following steps are required.

1. Wait for the DOM to finish loading.
2. Locate the element that contains the title, and bind the MouseOver event.
3. Locate the "content" element and display "content".
4. Locate the element that contains the title, and bind the Mouseout event.
5. Locate the "content" element and hide "content".

After the code runs, when the cursor is over the title link, the corresponding "content" is displayed. When the cursor slides out of the "title" link, the corresponding "content" is hidden.

The code is as follows:

1 2 3 4 5 6 7 8

$ (function () {$ ("#panel h5.head"). Bind ("MouseOver", function () {$ (). Next (). Show ();}); $ ("#panel h5.head"). Bind (" Mouseout ", function () {$ (this). Next (). hide ();}) })

In the preceding examples, the bind () method is used to bind the click event, MouseOver event, and Mouseout event to the title, and the binding method is the same. In addition, the Bind0 method can bind all other JavaScript events.

Events such as Click, MouseOver, and mouseout are often used in programs, and jquery provides a shorthand approach to this. The shorthand method is similar to the bind () method, and the effect is the same, and the only difference is the amount of code that can be reduced.

For example, rewrite the example above to use the shorthand binding event as follows:

1 2 3 4 5 6 7 8

$ (function () {$ ("#panel2 h5.head"). MouseOver (function () {$ (this). Next (), Show ();}); $ ("#panel2 h5.head"). Mouseout ( Function () {$ (this). Next (). hide ();}) })