Detailed explanation of events in jQuery

General introduction

jQuery adds and expands the basic event processing mechanism, which not only provides a more elegant event processing syntax, but also greatly enhances event processing capabilities

jQuery Event

Loading DOM

In jQuery, the $(document).ready() method is used to replace the window.onload method in JavaScript, but They also have some differences

1. Execution timing

For example, we have a webpage with many pictures

$(document).ready() method is on this webpage It can be executed after the DOM tree is loaded, and the window.onload method must be executed after the DOM tree and images are loaded.

If we use jQuery and we want to execute after the entire page is loaded, we can use load( ) method

The functions of the following two pieces of code are the same

// jQuery
$(window).load(function(){
  // 代码1
});
// JavaScript
window.onload = function(){
  // 代码2
};

2. Multiple uses

The onload event of JavaScript can only save a reference to one function at a time, and $(document).ready() can save multiple

function one(){
  alert('1');
}
function two(){
  alert('2');
}
// JavaScript
window.onload = one;
window.onload = two;//只执行two()
// jQuery
$(document).ready(function(){
  one();
});
$(document).ready(function(){
  two();
});//one() 和 two()都会执行

3. Abbreviation

$(document).ready(function(){}); can be abbreviated as $(function( ){});

Event binding

Syntax of bind() function: bind(type,[.data],fn)

The first parameter is the event Type

The second parameter is an optional parameter, an additional data object passed to the event object as the event.data attribute value

The third parameter is the processing function used for binding

Using an example, there are two divs. The second div is hidden. When we click the first div, the second div is displayed.

<div id="div1"></div>
<div id="div2"></div>
<script type="text/javascript">
$(function(){
  $(&#39;#div1&#39;).bind(&#39;click&#39;,function(){
    $(this).next().show();
  });
   
});

Add function. When div1 is clicked, if div2 If it is displayed, hide it, otherwise display it

$(function(){
  $('#div1').bind('click',function(){
    if($(this).next().is(':visible')){
      $(this).next().hide();
    }else{
      $(this).next().show();
    }
  });
});

Abbreviation:

$('#div1').click(function(){
  if($(this).next().is(':visible')){
     $(this).next().hide();
   }else{
     $(this).next().show();
   }
})

Synthetic event

1, hover() method

is used Simulate cursor hover events. The first function is triggered when the cursor moves to the element. When the cursor moves out of the element, the second function is triggered.

$('#div1').hover(function(){
  $(this).next().show();
},function(){
  $(this).next().hide();
});

2. The toggle() method

is used to simulate continuous mouse clicks. Click event, when the mouse clicks the element for the first time, the first function is triggered, and when the mouse clicks the same function, the second function is triggered

$('#div1').toggle(function(){
  $(this).next().show();
},function(){
  $(this).next().hide();
});

Prevent event bubbling and prevent default behavior

1. Prevent event bubbling

stopPropagation() method

2. Prevent default behavior

preventDefault() method

Note: 1. return false in In jQuery, both event bubbling and default behavior are prevented

　2. jQuery does not support event capture

Attributes of event objects

1.event.type

The function of the modified method is to obtain the type of event

$('#div1').click(function(ev){
   alert(ev.type);//click
 })

2, event.target

Get the element that triggers the event

$('#div1').click(function(ev){
  alert(ev.target.id);//div1
 })

3, event.relatedTarget

Get related elements

4, event.pageX and event.pageY

Get the x coordinate and y coordinate of the cursor relative to the page

$('#div1').click(function(ev){
 alert(ev.pageX + ',' + ev.pageY);//275,181
 })

5 , event.which

The function of this method is to obtain the left, middle, and right mouse buttons in the mouse click event; to obtain the keyboard keys in the keyboard event

$('#div1').click(function(ev){
 alert(ev.which);//1是鼠标左键，2是鼠标中见，3是鼠标右键
})

Remove event

unbind() method syntax: unbind([type],[data]);

The first parameter is the event type, and the second parameter is the function to be removed

Look at an example, bind the following events to div1

$('#div1').bind('click',function(){
  alert('1');
}).bind('click',function(){
  alert('2');
}).bind('mouseover',function(){
  alert('3');
})

1. If there are no parameters, delete all bound events

$('#div1').unbind(); //Delete all events

2. If the event type is provided as a parameter, only the bound events of this type will be deleted

$('#div1').unbind('mouseover') ;//Delete mouseover event

3. If the processing function passed when binding is used as the second parameter, only this specific time processing function will be deleted

Simulation operation

1. Commonly used simulations

You can use the trigger() method in jQuery to complete simulation operations. For example, you can use the following code to trigger the click event of the button with the id btn

$ ('#btn').trigger('click');

2. Trigger custom events

trigger() method can not only trigger events with the same name supported by the browser, but also Events with custom names can be triggered.

$('#btn').bind('myclick',function(){
  alert('1');
});
$('#btn').trigger('myclick');

3. Pass data

$('#btn').bind('myclick',function(event,message1,message2){
 alert(message1 + message2);
});
$('#btn').trigger('myclick',["1","2"]);

4. Perform default operation

$('input').trigger('focus');

Above The code will trigger the focus event of the input element, and will also cause the element itself to gain focus.

If you only want to trigger a specific event bound to the element, cancel the browser's control of this event. The default operation can use the triggerHandler() method

Other usage

Add an event namespace for easier management

For example, you can use namespace specifications to bind multiple event types to an element Get up

$('div').bind('click.plugin',function(){
  alert('1');
});
$('div').bind('mouseover.plugin',function(){
  alert('2');
});
$('div').bind('dbclick.plugin',function(){
  alert('3');
});
$('button').click(function(){
  $('div').unbind('.plugin');
})

The above is the entire content of this article. I hope that the content of this article can bring some help to everyone's study or work. I also hope to support the PHP Chinese website!

For more detailed articles related to events in jQuery, please pay attention to the PHP Chinese website!