jQuery Events

Events are occured when user interact with web page. For example, text is entered into an input box, select option in select bar, key is pressed on the keyboard, the mouse pointer is moved, scroll the web page etc.

The click() Method

The click() method attaches an event handler function to an HTML element. The function will be execute when user click on that element. 

Example of Code

<style type="text/css">
    .example-jquery-event-click{
        padding: 20px;
        font: 20px sans-serif;
        background: khaki;
    }
</style>
<script type="text/javascript">
$(document).ready(function(){
    $(".example-jquery-event-click").click(function(){
        $(".example-jquery-event-click").slideUp();
    });
});
</script>
<p class="example-jquery-event-click">Click here.</p>
<p class="example-jquery-event-click">Click here.</p>

Output

The dblclick() Method

The dblclick() method attaches an event handler function to an HTML element. The function will be execute when user double-click on that element.   

Example of Code

<style type="text/css">
    .example-jquery-event-dblclick{
        padding: 20px;
        font: 20px sans-serif;
        background: khaki;
    }
</style>
<script type="text/javascript">
$(document).ready(function(){
    $(".example-jquery-event-dblclick").dblclick(function(){
        $(".example-jquery-event-dblclick").hide();
    });
});
</script>
<p class="example-jquery-event-dblclick">Click here.</p>

Output

The hover() Method

The hover() method attaches one or two event handler function to an HTML element. The function will be execute when user mouse pointer enters and leaves the element. 

Example of Code

<script type="text/javascript">
$(document).ready(function(){
    $(".example-jquery-event-hover").hover(function(){
        $(this).css("background-color", "grey");
    }, function(){
    $(this).css("background-color", "red");
  });
});
</script>
<p class="example-jquery-event-hover">Mouse-Pointer Here</p>

Output

The mouseenter() Method

The mouseenter() method attaches one or two event handler function to an HTML element. The function will be execute when user mouse enters an element. 

Example of Code

<script>
$(document).ready(function(){
  $(".example-jquery-event-mouseenter").mouseenter(function(){
    $(this).css("background-color", "yellow");
  });
  $(".example-jquery-event-mouseenter").mouseleave(function(){
    $(this).css("background-color", "lightgray");
  });
});
</script>
<p class="example-jquery-event-mouseenter">Mouse-Pointer Here</p>

Output

The keypress() Method

The jQuery keypress() method attach an event handler function to the selected elements (typically form controls) that is executed when the browser receives keyboard input from the user.

Example of Code

<style type="text/css">
    .example-jquery-event-keypress-paragraph{
        padding: 10px;
        background: lightgreen;
        display: none;
    }
    .example-jquery-event-keypress-div{
        margin: 20px 0;
    }
</style>
<script type="text/javascript">
$(document).ready(function(){
    var i = 0;
    $(".example-jquery-event-keypress-text").keypress(function(){
        $(".example-jquery-event-keypress-span").text(i += 1);
        $(".example-jquery-event-keypress-paragraph").show().fadeOut();
    });
});
</script>
<input type="text" class="example-jquery-event-keypress-text">
<div>Keypress: <span class="example-jquery-event-keypress-span">0</span></div>
<p class="example-jquery-event-keypress-paragraph">Keypress is triggered.</p>

Output

The keydown() Method

The jQuery keydown() method attach an event handler function to the selected elements (typically form controls) that is executed when the user first presses a key on the keyboard.

Example of Code

<style type="text/css">
    .example-jquery-event-keydown-paragraph{
        padding: 10px;
        background: lightgreen;
        display: none;
    }
    .example-jquery-event-keydown-div{
        margin: 20px 0;
    }
</style>
<script type="text/javascript">
$(document).ready(function(){
    var i = 0;
    $(".example-jquery-event-keydown-text").keydown(function(){
        $(".example-jquery-event-keydown-span").text(i += 1);
        $(".example-jquery-event-keydown-paragraph").show().fadeOut();
    });
});
</script>
<input type="text" class="example-jquery-event-keydown-text">
<div class="example-jquery-event-keydown-div">Keydown: <span class="example-jquery-event-keydown-span">0</span></div>
<p class="example-jquery-event-keydown-paragraph">Keydown is triggered.</p>

Output

The keyup() Method

The jQuery keyup() method attach an event handler function to the selected elements (typically form controls) that is executed when the user releases a key on the keyboard. 

Example of Code

<style type="text/css">
    .example-jquery-event-keyup-paragraph{
        padding: 10px;
        background: lightgreen;
        display: none;
    }
    .example-jquery-event-keyup-div{
        margin: 20px 0;
    }
</style>
<script type="text/javascript">
$(document).ready(function(){
    var i = 0;
    $(".example-jquery-event-keyup-input").keyup(function(){
        $(".example-jquery-event-keyup-span").text(i += 1);
        $(".example-jquery-event-keyup-paragraph").show().fadeOut();
    });
});
</script>
<input type="text" class="example-jquery-event-keyup-input">
<div class="example-jquery-event-keyup-div">Keyup: <span class="example-jquery-event-keyup-span">0</span></div>
<p class="example-jquery-event-keyup-paragraph">Keyup is triggered.</p>

Output

The change() Method

The jQuery change() method attach an event handler function to the <input>, <textarea> and <select> elements that is executed when its value changes.

Example of Code

<script type="text/javascript">
$(document).ready(function(){
    $(".example-jquery-event-change-select").change(function(){
        var selectedOption = $(this).find(":selected").val();
        alert("You have selected - " + selectedOption);
    });
});
</script>
<form>
    <label>City:</label>
    <select class="example-jquery-event-change-select">
        <option>London</option>
        <option>Paris</option>
        <option>New York</option>
    </select>
</form>

Output

The focus() Method

The jQuery focus() method attach an event handler function to the selected elements (typically form controls and links) that is executed when it gains focus.

Example of Code

<style type="text/css">
    .example-jquery-event-focus-label{
        display: block;
        margin: 5px 0;
    }
    .example-jquery-event-focus-label .example-jquery-event-focus-span{
        display: none;
    }
</style>
<script type="text/javascript">
$(document).ready(function(){
    $(".example-jquery-event-focus-input").focus(function(){
        $(".example-jquery-event-focus-input").next(".example-jquery-event-focus-span").show().fadeOut("slow");
    });
});
</script>
<label class="example-jquery-event-focus-label">Email: <input type="text" class="example-jquery-event-focus-input"> <span 
class="example-jquery-event-focus-span">focus fire</span></label>

Output

The blur() Method

The jQuery blur() method attach an event handler function to the form elements such as input, textarea, select tags that are executed when it loses focus. The following example will display a message when the 
text input loses focus.

Example of Code

<style type="text/css">
    .example-jquery-event-blur-label{
        display: block;
        margin: 5px 0;
    }
    .example-jquery-event-blur-label .example-jquery-event-blur-span{
        display: none;
    }
</style>
<script type="text/javascript">
$(document).ready(function(){
    $(".example-jquery-event-blur-input").blur(function(){
        $(".example-jquery-event-blur-input").next(".example-jquery-event-blur-span").show().fadeOut("slow");
    });
});
</script>
<form>
    <label class="example-jquery-event-blur-label">Email: <input type="text" class="example-jquery-event-blur-input"> <span 
    class="example-jquery-event-blur-span">blur fire</span></label>
</form>      

Output