Detailed explanation of DOM event binding usage in JQuery_jquery

The example in this article describes the usage of DOM event binding in JQuery. Share it with everyone for your reference. The specific analysis is as follows:

After the document is loaded, if you plan to bind events to elements to complete certain operations, you can use the bind() method to bind specific events to matching elements. The calling format of the bind() method is:

bind( type [, data] , fn);

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

The first parameter is the event type, including: blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error, etc., of course, they can also be customized names.
The second parameter is an optional parameter and is an additional data object passed to the event object as the event.data property value.
The third parameter is the processing function bound with meters.

You can find that the event binding type in jQuery has less "on" than the ordinary JavaScript event binding type. For example, the mouse click event corresponds to the click event in jQuer, and the onclick() function in JavaScript.

According to requirements, you need to complete the following steps.

1. Wait for the DOM to be loaded.
2. Find the element where the "title" is located and bind the click event.
3. Find 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.

There is a keyword this in the jQuery code above, which has the same function as in JavaScript. This refers to the DOM element that carries the corresponding behavior. To enable this DOM element to use methods in jQuery, you can use $(this) to convert it to a jQuery object.

In order 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 a local variable can be defined for it: $content.

In the above example, the event type bound to the element is click. When the user clicks, the bound event will be triggered, and then the function code of the event will be executed. Now change the event type to mouseover and mouseout, that is, when the cursor slides over, the event is triggered. The following steps are required.

1. Wait for the DOM to be loaded.
2. Find the element where the "title" is located and bind the mouseover event.
3. Find the "Content" element and display "Content".
4. Find the element where the "title" is located and bind the mouseout event.
5. Find the "Content" element and hide "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 above examples, the bind() method is used to bind the click event, mouseover event and mouseout event to the "title" respectively. The binding methods are the same. In addition, the bind0 method can also bind all other JavaScript events.

Events such as click, mouseover, and mouseout are often used in programs. jQuery also provides a set of abbreviated methods for this. The abbreviation 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, if you rewrite the above example to use abbreviations to bind events, 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 be helpful to everyone’s jQuery programming.