What are jQuery Events?
In most of the web applications, the user performs some operation to do some actions. Events are actions that can be detected by your web application when the user performs some operation. The jQuery event method registers an event handler when the user interacts with the web pages.
For e.g, the user clicks on the save button to save the webpage. Here in this example, clicking on the button is user action which triggers click event and the click event function(handler) saves data.
Following are some examples of events:
- A mouse click
- A web page loading
- Taking mouse over an element
- Submitting an HTML form
- A keystroke on your keyboard, etc.
Following are some common DOM events:
| Category | jQuery Method | DOM Event |
|---|---|---|
| Form events | blur | onblur |
| change | onchange | |
| focus | onfocus | |
| focusin | onfocusin | |
| submit | onsubmit | |
| select | onselect | |
| Keyboard events | keydown | onkeydown |
| keypress | onkeypress | |
| keyup | onkeyup | |
| Mouse events | click | onclick |
| dblclick | ondblclick | |
| mousedown | onmousedown | |
| mouseenter | onmouseenter | |
| mouseleave | onmouseleave | |
| mousemove | onmousemove | |
| mouseout | onmouseout | |
| mouseover | onmouseover | |
| mouseup | onmouseup | |
| Browser events | Error | onerror() |
| Resize | onresize | |
| Scroll | onscroll | |
| Document loading | Load | onload |
| Unload | onunload |
jQuery Syntax for Event Methods:
The DOM events have an equivalent jQuery method. If you want to assign a click event to all <h2> elements on a page, you can do this:
The next step defines what should happen when the event occurs, you must pass a function to the event.
Commonly Used jQuery Event Methods:
$(document).ready():
The $(document).ready() function will execute jQuery functions after web page is fully ready. This $(document).ready() event is already explained in the jQuery Download and Syntax topic.
click():
The jQuery click event occurs when the user clicks on an HTML element. The click() method in jQuery is used to trigger the click event. For example, $(“div”).click() will trigger the click event when a div is clicked on a document (a web page). We can attach a function to the click() method to run the function when a click event occurs, this way we can run a piece of code every time the click event is triggered.
dblclick():
The jQuery dblclick() method attaches a double click event handler function to an HTML element.
This event handler function executes when the user double clicks on the HTML element.
mouseenter():
The jQuery mouseenter() method attaches the mouse enter event handler function to an HTML element. This event handler function executes when the mouse pointer enters the attached HTML element.
mouseleave():
The jQuery mouseleave() method attaches mouse leave event handler function to HTML elements. This mouse leave event is triggered when the mouse pointer leaves the HTML element. When the mouse leave event is triggered, the associated event handler function executes.
mousedown():
The jQuery mousedown() method associates an event handler function to the HTML elements. This event handler function is executed when any of the mouse button (left, right or middle) is pressed down on an HTML element.
mouseup():
The jQuery mouseup() method attaches an event handler function to the HTML elements. This event handler function is executed when the any of the mouse button (left, right or middle) is released, while the mouse pointer is over the HTML element.
hover():
The jQuery hover() method is a combination of mouseenter() and mouseleave() methods. The hover() method attaches an HTML element to two of the event handler functions, the first function executes when the mouse pointer enters the HTML element and the second function executes when the mouse pointer leaves the HTML element.
focus():
The jQuery focus() method attaches an event handler function to HTML elements. This event handler function executes when a form field gets focus.
blur():
The jQuery blur() method attaches an event handler function to HTML elements. This function executes when a form field loses focus. This method works just opposite to the focus() method. The difference between focus() and blur() method is that the focus event is triggered when a form field gets focus while blur event is triggered when a form field loses focus.