jQuery Events
jQuery events are actions or occurrences that happen on a web page, such as clicks, hover, or keypress. jQuery provides methods to handle and respond to these events with ease. jQuery events are used to create dynamic web pages.
Syntax:
$(selector).method(function)
Here We will explore some basic events along with their basic implementation of examples.
jQuery click() Event
jQuery click is a mouse event that triggers when an element is clicked by the mouse pointer.
Syntax:
$(selector).click(function);
Example: In this example, we are using the click() event.
HTML
<!DOCTYPE html> < html > < head > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > </ script > <!-- jQuery code to show the working of this method --> < script > $(document).ready(function () { $("p").click(); }); </ script > < style > p { display: block; width: 300px; padding: 20px; font-size: 30px; border: 2px solid green; } </ style > </ head > < body > < center > <!-- click on this method --> < p onclick = "alert('paragraph was clicked')" > w3wiki. </ p > </ center > </ body > </ html > |
Output
jQuery dblclick() Event
jQuery dblclick is a mouse event that triggers when an element is double-clicked by the mouse pointer.
Syntax:
$(selector).dblclick(args);
Example: In this example, we are using dblclick() event.
HTML
<!DOCTYPE html> < html > < head > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" > </ script > <!-- jQuery code to show the working of this method --> < script > $(document).ready(function () { $("p").dblclick(); }); </ script > < style > p { display: block; width: 300px; padding: 20px; font-size: 30px; border: 2px solid green; } </ style > </ head > < body > < center > <!-- click on this method --> < p onclick = "alert('dblclick event has trigged')" > w3wiki. </ p > </ center > </ body > </ html > |
Output
jQuery mouseenter() and mouseleave() Events
jQuery mouseenter is a mouse event that triggers when the mouse pointer enters an element, and mouseleave is a mouse event that triggers when the mouse pointer leaves an element.
Syntax:
$(selector).mouseenter(function)
and
$(selector).mouseleave(function)
Example: In this example, we have a div with a class “box.” It changes color to white on mouseenter and black on mouseleave using jQuery.
HTML
<!DOCTYPE html> < html > < head > < script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" > </ script > < style > .box { width: 200px; height: 100px; background-color: lightblue; } .box:hover { background-color: gray; } </ style > </ head > < body > < h2 > Mouse Enter and Mouse Leave Events Example </ h2 > < div class = "box" > Hover over the div </ div > < script > $(document).ready(function () { // Using the mouseenter event $(".box").mouseenter(function () { $(this).css("color", "white"); }); // Using the mouseleave event $(".box").mouseleave(function () { $(this).css("color", "black"); }); }); </ script > </ body > </ html > |
Output
The Complete List of jQuery events are listed below:
jQuery Mouse events
jQuery Mouse events handle interactions with the mouse, like click, hover, dblclick. Use on() method to bind event handlers.
Event name | Description |
---|---|
click() | The jQuery click() is an inbuilt method that starts the click event or attaches a function to run when a click event occurs. |
dblclick() | The jQuery dblclick() is an inbuilt method that is used to trigger the double-click event to occur. |
moueenter() | This is an inbuilt method that works when the mouse pointer moves over the selected element. |
mouseleave() | This is an inbuilt method that works when the mouse pointer leaves the selected element. |
mouseup() | Occurs when any mouse button is released on an element. |
contextmenu() | Occurs when the right mouse button is clicked on an element, opening the context menu. |
mouseover() | The event occurs when the pointer is moved onto an element, or onto one of its children. |
mouseout() | The event occurs when a user moves the mouse pointer out of an element, or out of one of its children. |
jQuery Keyboard Events
jQuery Keyboard events handle interactions with the keyboard, like keypress, keyup, keydown. Use on() method to bind event handlers.
Keyboard events | Description |
---|---|
keypress() | The jQuery keypress() method triggers the keypress event whenever the browser registers a keyboard input. |
keydown() | This is used to trigger the key-down event whenever the User presses a key on the keyboard. |
keyup() | This is used to trigger the keyup event whenever the User releases a key from the keyboard. |
jQuery Document/ Window Events
jQuery Document/Window events handle interactions with the document or window.
Document events | Description |
---|---|
load() | load is a document event that triggers when the entire page and its resources have loaded. |
resize() | resize is a window event that triggers when the window is resized. |
scroll() | The jQuery scroll() is an inbuilt method that is used to user scroll in the specified element. |
unload() | The unload is a window event that triggers when the page unloads. |
jQuery Form Event
jQuery Form event handles form-related interactions like submit etc. Use on() method to bind event handlers to form elements.
Event name | Description |
---|---|
Submit() | Form submission event triggered when a user submits a form on a web page. |
Change() | Event-triggered when an element’s value changes (e.g., input, select). |
focus() | Event fired when an element gains focus (e.g., input, textarea). |
blur() | The event is fired when an element loses focus. |
Contact Us