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')"> Geeksforgeeks. </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')"> Geeksforgeeks. </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.
|
| 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.
|
| 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.
|
| 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.
|
| Form submission event triggered when a user submits a form on a web page. |
| Event-triggered when an element's value changes (e.g., input, select). |
| Event fired when an element gains focus (e.g., input, textarea). |
| The event is fired when an element loses focus. |