Wednesday , January 18 2017
Home / jquery / JQuery Events Example Tutorials

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.”);
});

Jquery Events : blur Example

Jquery Events : blur Example


<!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>

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.

Jquery Events : dblclick Example

Jquery Events : dblclick Example


<!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>

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.

About chandrashekhar

Hi Folks, you have reach this so far, that shows you like what you are learning. Then why don't you support us to improve for bettor tutorials by leaving your valuable comments and why not you keep in touch with us for latest updates on your favorite blog @ facebook , twitter , Or Google+ ,

Check Also

JQuery Remove Elements Example

In this tutorial we  are going to understand JQuery Remove Elements. Remove Elements in JQuery …

Leave a Reply

Your email address will not be published. Required fields are marked *