JQuery Events Example Tutorials

JQuery events are very simple. It can use HTML markup and events in JavaScript. Events denotes the actions which are occur on a web page. It is an exact moment that happened on a web page.

JQuery Events :

Here are the list of events supported by the JQuery.

Mouse Events

Mouse Click (click).
Double click (dbclick).
Mouse enter on a web page (mouseenter).
Mouse leave from a web page (mouseleave).

Keyboard Events

Release a key on a keyboard (keyup).
Press keys on how many times on a keyboard (keydown).
Press any key on a keyboard (keypress).

Form Events

To submit the form (submit).
Changes made in the form (change).
To focus the form (focus).

Document Events

To load the document (load).
To close the document (unload).
To scroll the document (scroll).
To resize the document (resize).

Syntax for jQuery events :

Here are the typical examples for JQuery Events;

$(“p”).click();

The above statement represents the click event on all paragraph on a web page.

$(“p”).click(function{ //action });

We can also pass parameter to click method. On the above example we passed callback function to click event, it will execute after the click event happened.

JQuery bind() Event :

More event handlers are combined by using bind() method. It can also pass function to the events.

$(selector).bind(event,data,function,map)

$( "#foo" ).bind( "click", function() {
alert( "User clicked on 'foo.'" );
});

$( "#foo" ).bind( "mouseenter mouseleave", function() {
$( this ).toggleClass( "entered" );
});

Here the event parameter is a mandatory. It represents more events that occur on the same element. If multiple events are used for the same element, then the events should be separated by space.

JQuery blur() Event :

If an element loses its focus, the jQuery blur() event will occur on a web page. It can be made by through the keyboard events. The events are like; tab key pressed unfortunately or the page receives the mouse click anywhere on the page.

$(selector).blur(function)

The function of the event enables the user at the time of an element losses its focus.

$("input").blur(function(){
alert("This text box has lost its focus.");
});

Blur Example :

[html]

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery Document Ready Demo</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
   $(document).ready(function() {
       $("#textBox").blur(function() {
           alert("blur() called.");
       });
   })
</script>
<body>
   <form>
       <input id="textBox" type="text" value="Field 1"> <input
           type="text" value="Field 2">
   </form>
   <div id="other">Blur Example</div>
</body>
</html>
[/html]

JQuery dblclick() Event :

It represents the mouse double click on a web page elements.

$(“p”).dblclick(function{
//action
});

The above code specifies that, when ever we double click on paragraph it fires the dblclick() event and executes the function passed to the dblclick() method.

dblclick event:

[html]

<!DOCTYPE html>
<html>
<head>
<style>
div {
    background: Red;
    color: white;
    height: 100px;
    width: 100px;
}
div.dbl {
    background: green;
    color: black;
}
</style>
<meta charset="utf-8">
<title>jQuery dblclick Demo</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
   $(document).ready(function() {

       var divdbl = $( "div:first" );
       divdbl.dblclick(function() {
          divdbl.toggleClass( "dbl" );
       });

   })
</script>
<body>
   <div></div>
<span>Double click the block</span
</body>
</html>

[/html]

JQuery mouseenter() Event :

$(“p”).mouseenter(function{
//action
});

The above code specifies that, when ever the mouse enters on the paragraph, it fires the mouseenter event and executes the function passed to the mouseenter() method.

JQuery keypress() Event :

$(‘input[type=”text”]’).keypress(function{
//action
});

The above method represents the get the input from the keyboard. Browser receives the keyboard input when use in the web page element.

JQuery keydown() Event :

$( "#target" ).keydown(function() {
alert( "keydown() event called." );
});

It is used to find the number of time key press on a web page element.

JQuery keyup() Event :

$( "#target" ).keyup(function() {
alert( "Handler for .keyup() called." );
});

It is used to find the number of time key releases from the web page element.

JQuery change() Event :

$( ".target" ).change(function() {
alert( "Handler for .change() called." );
});

It is used to change the value on a web page when the page receives any text or value.

JQuery focus() Event :

$("input").focus(function(){
//action
});

This event represents the particular focus on a web page element. That is control or link happens in a particular elements.

JQuery submit() Event :

$("form").submit(function()event{
//action
});

This event happens when we select the submit button on the form.

JQuery ready() Event :

$(document).ready(function(){
});

After document is fully loaded it will ready to take actions on the web page element.

JQuery resize() Event :

$(document).ready(function(){
$(window).resize(function() {
});

It will resize the browser window or the document.

JQuery scroll() Event :

$(document).ready(function(){
$(window).scroll(function() {
});

It represents the position of the document or window when scroll it. Therefore, there are various JQuery Event Methods such as dblclick(), mouseenter(), keypress(), keyup(), keydown(), change(), scroll() and so on.

Happy Learning 🙂