jQuery Events
jQuery events let you run a function when something happens in the browser, such as a click, a key press, focus entering a field, or a window resize.
For current jQuery code, the most flexible pattern is .on(). It can bind one event, several events, or delegated events for elements that are added later.
Basic Event Syntax Top ↑
$( "#b1" ).on( "click", function (event) {
$( "#result" ).text( "Button clicked" );
});
The handler receives an event object. Useful properties include event.type, event.target, keyboard properties such as event.key, and pointer coordinates such as event.pageX.
jQuery Event Tutorials Top ↑
| Event topic | What you will learn |
|---|---|
| Click | Run code when an element is clicked. |
| Double Click | Handle a double-click separately from a normal click. |
| Hover | Respond when the pointer enters and leaves an element. |
| Mouse Enter / Leave | Use mouseenter and mouseleave for element boundaries. |
| Mouse Move | Run code continuously as the pointer moves over an element. |
| Pointer Coordinates | Read the pointer position from an event object. |
| Focus | React when a form control receives focus. |
| Blur | React when a form control loses focus. |
| Keydown | Handle a key being pressed down. |
| Keyup | Handle a key being released. |
| Keypress | Understand the legacy keypress event and its limitations. |
| Keyboard Key Details | Read modern keyboard event properties instead of relying on the old jQuery event.which shim. |
| Keydown vs Keypress | Compare keydown and keypress behavior. |
| Key Hold Duration | Measure how long a key is held. |
| Window Resize | React when the browser window changes size. |
| Scroll | React to document or element scrolling. |
| Event Calendar Application | Application example combining events, datepicker and AJAX. |
Mouse Events with jQuery
Keyboard Events with jQuery
Form Component Events with jQuery
Window Events with jQuery
Bind More Than One Event Top ↑
Separate event names with spaces when the same handler should run for more than one event. The original page used .bind(); .on() is the current equivalent.
$( "#id_dtl" ).on( "blur keyup", function (event) {
// Runs after either blur or keyup.
});
Identify Which Event Ran Top ↑
$( "#b1" ).on( "click dblclick", function (event) {
$( "#t1" ).text( "Event type: " + event.type );
});
Delegated Events for Dynamic Elements Top ↑
If an element may be created after the page loads, bind the event to a stable ancestor and provide a selector.
$( "#display_body" ).on( "click", ".edit_class", function () {
const id = this.id;
console.log( "Clicked:", id );
});
Practice Ideas Top ↑
- Display a welcome message when a button is clicked, then remove it after two seconds.
- Use one handler for a group of radio buttons and display the selected value.
- Handle both click and double-click and display
event.type. - Create a live textarea character counter.
- Measure how long a key is held between
keydownandkeyup.
Continue Learning jQuery
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
