jQuery Events

jQuery’s event API provides several useful methods that can be used to create dynamic web pages. Events are nothing but actions that you can perform on a web page such as mouse click, mouse hover, double click etc. In jQuery we can detect such events and can write a custom code (function) for each of these events. This gives us freedom to do whatever we want to do on an occurrence of an event, such custom functions are called event handlers. In this guide, we will discuss various events provided by jQuery event API.

jQuery Event Method Syntax

This is a button click event, it will trigger when we click on a button on a webpage.

$("button").click();

Now that we have detected a particular event using above code, our next step to write a custom code that executes when a button click event occurs. For this we have to write a custom function called event handler as shown below:

$("button").click(function(){
  // custom code for event handler
});

$(document).ready() method

Before we start learning various events, lets first understand the use of most commonly used method in jQuery. $(document).ready() method executes when a document (a web page) is fully loaded in the browser. We almost always write event handlers inside this method because we do not want to trigger an event when our page is not fully loaded.

We write a event handler inside $(document).ready() method like this: In the following example we are hiding all the paragraphs on a button click event. We have written the button click event handler inside $(document).ready() method so that the event only triggers when the page is fully loaded.

$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});

jQuery Events

jQuery Mouse Events

Tutorial link	Description
click	jQuery click event occurs when a user clicks on an html element.
dblclick	jQuery dblclick event occurs when a user double clicks on an html element.
mouseenter	jQuery mouseenter event occurs when the mouse pointer enters the html element.
mouseleave	jQuery mouseleave event occurs when the mouse pointer leaves the html element.
mousedown	jQuery mousedown event occurs when any of the mouse button is pressed down while the mouse pointer is over an html element.
mouseup	jQuery mouseup event occurs when any of the mouse button is released while the mouse pointer is over an html element.
hover	jQuery hover event is a combination of mouseenter() and mouseleave() methods. First event handler function executes when mouse pointer enters the html element and the second event handler function executes when the mouse pointer leaves the html element.

jQuery Form Events

Tutorial link	Description
focus	jQuery focus event occurs when a form field gets focus.
blur	jQuery blur event occurs when a form field loses focus.
submit	jQuery submit event occurs when a form is submitted.
change	jQuery change event occurs when the value of an element has been changed. The applicable elements for this event are: <input>, <textarea> and <select>

jQuery Keyboard Events

Tutorial link	Description
keypress	jQuery keypress event occurs when a button is pressed down. The keypress event is not triggered for special keys such as ALT, CTRL, SHIFT, ESC.
keydown	jQuery keydown event occurs when a keyboard key is pressed down. Unlike keypress event, this event is triggered for ALT, CTRL, SHIFT, ESC keys.
keyup	jQuery keyup event occurs when a keyboard key is released

jQuery Window Events

 

Tutorial link	Description
resize	jQuery resize event occurs when the browser window is resized.
scroll	jQuery scroll event occurs when user scrolls in the specified html element.