Usage of DOM Event binding in JQuery: jquerydom

Usage of DOM Event binding in JQuery: jquerydom

This document describes how to bind a DOM Event in JQuery. Share it with you for your reference. The specific analysis is as follows:

After the document is loaded, if you intend to bind events to the elements to complete some operations, you can use the bind () method to bind specific events to the matching elements, bind () method call format:

Bind (type [, data], fn );

The bind () method has three parameters, which are described as follows.

The 1st parameters are event types, including: blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup and error, it can also be a custom name.
The third parameter is an optional parameter, which is an additional data object passed to the event object as the event. data Attribute Value.
The first parameter is the processing function bound with meters.

We can find that the event binding type in jQuery is less "on" than that in normal JavaScript event binding ". For example, the mouse click event corresponds to the click Event in jQuer, while the onclick () function in JavaScript.

Follow these steps as required.

1. Wait until the DOM is loaded.
2. Locate the element of the title and bind the click event.
3. Locate the "content" element and display the "content" element.

$(function(){ $("#panel h5.head").bind("click",function(){   var $content = $(this).next();   if($content.is(":visible")){      $content.hide();    }else{      $content.show();    }  })})

Like the ready () method, the bind () method can also be called multiple times.

The above jQuery code has a keyword "this", which serves the same purpose as JavaScript. this references the DOM element carrying the corresponding behavior. To enable this DOM element 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. In the code, it is found that $ (this). next ("div. content") is used multiple times, so you can define a local variable for it: $ content.

In the above example, the event type bound to the element is click. When a user clicks, The Bound event is triggered and the function code of the event is executed. Now, the event type is changed to mouseover and mouseout, that is, when the cursor slides over, the event is triggered. Perform the following steps.

1. Wait until the DOM is loaded.
2. Locate the element of the title and bind the mouseover event.
3. Find the "content" element and display "content ".
4. Locate the element of the title and bind the mouseout event.
5. Find the "content" element to hide the "content ".

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

The Code is as follows:

$(function(){  $("#panel h5.head").bind("mouseover",function(){   $(this).next().show();  });   $("#panel h5.head").bind("mouseout",function(){    $(this).next().hide();  }) })

In the preceding examples, the click event, mouseover event, and mouseout event are bound to the "title" by using the bind () method. The binding methods are 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. jQuery also provides a simple method. The abbreviated method is similar to the bind () method, and achieves the same effect. The only difference is that it can reduce the amount of code.

For example, you can rewrite the preceding example to bind an event in short form. The Code is as follows:

$(function(){ $("#panel2 h5.head").mouseover(function(){   $(this).next().show();  });  $("#panel2 h5.head").mouseout(function(){    $(this).next().hide();  })})

I hope this article will help you with jQuery programming.