Understanding Events in jQuery

Understanding Events in jQuery

Refer to the following jQuery lesson by Mytour to explore what jQuery events are, and how to handle them effectively.

1. What is an Event?

An Event is typically triggered by user interactions with a webpage, such as clicking a button or link, typing text into a field, pressing a key on the keyboard, moving the mouse cursor, and so on. In some cases, browsers can automatically trigger events, like page loading.

jQuery enhances the handling of basic events by providing event methods for most browser events, including methods like ready(), click(), keypress(), focus(), blur(), change(), and more.

Example: to execute some JavaScript code when the DOM is ready, we can utilize the jQuery ready() method as demonstrated below:

Note: $(document).ready() is an event used to manipulate a page safely with jQuery. Code included in this event only runs when the DOM is ready, meaning when the document is ready for manipulation.

In essence, events in jQuery are broadly categorized into 4 main groups: mouse event, keyboard event, form event, and document/window event.

2. Mouse Event

Mouse interaction gets triggered when users click the mouse on certain elements or move the mouse pointer, ... . Here are some commonly used jQuery methods to handle mouse events.

2.1. click() Method

The click() method in jQuery attaches an event handler to selected elements for the 'click' event. The attached function is executed when users click on that element.

Example: In the following example, it will hide the p elements on the page when users click:

The output result appears as follows:

Note: The keyword 'this' in the jQuery event handler refers to the element containing the event.

2.2. dblclick() Method

The dblclick() method in jQuery attaches an event handler to elements for the 'dblclick' event. The attached function is executed when users double-click on that element.

Example: In this illustration, hide the p elements when users double-click on this element:

The output result appears as follows:

The hover() method in jQuery attaches one or two event handler functions to selected elements. It is executed when users move the mouse over and out of the selected elements. The first function is executed when users move the mouse over the element, and the second function is executed when users move the mouse out of that element.

Example: In this example, highlight the p elements when users place the mouse pointer over the element and when users move the pointer to another position:

The output result appears as follows:

Tip: We can consider the hover() method as a combination of the mouseenter() and mouseleave() methods in jQuery.

2.4. mouseenter() Method

The mouseenter() method in jQuery attaches an event handler to selected elements and is executed when the mouse is placed over that element.

Example: In this example, add an effect class to highlight the p element when users place the mouse pointer over it:

The output result appears as follows:

2.5. mouseleave() Method

The mouseleave() method in jQuery attaches an event handler to selected elements and is executed when the mouse pointer leaves that element.

Example: In this example, remove the effect classes highlighting the p element when users move the mouse pointer out of it:

The output result appears as follows:

3. Keyboard Event

Keyboard Event is triggered when users press or release a key on the keyboard. Here are some jQuery methods used to handle Keyboard Events:

3.1. keypress() Method

The keypress() method in jQuery attaches an event handler to selected elements (usually form controls) and is executed when the browser receives input from the user's keyboard.

Example: In this example, display a message when the keypress event is triggered and show the number of times it's activated when users press a key on the keyboard:

The output result appears as follows:

Note: The keypress event is similar to the keydown event, except for modifier keys and keys like Shift, Esc, Backspace, Delete, and arrow keys, ... .

3.2. keydown() Method

The keydown() method in jQuery attaches an event handler to selected elements (usually form controls) and is executed when users press the first key on the keyboard.

Example: In this example, display a message when the keydown event is triggered and show the number of times it's activated when users press a key on the keyboard:

The output result appears as follows:

3.3. keyup() Method

The keyup() method in jQuery attaches an event handler to selected elements (usually form controls) and is executed when users release a key on the keyboard.

Example: In this example, show a message when the keyup event is triggered and display the number of times the event is activated when users press and release a key on the keyboard.

The output result appears as follows:

Tip: Keyboard Events in jQuery can be attached to any element, but the event is only sent to focused elements. That's why keyboard events are often attached within form controls such as text input boxes, ....

4. Form Event

Form Event is triggered when users modify values in form controls, such as typing text in a text box, selecting any options in a dropdown, ... . Here are some jQuery methods used to handle form events:

4.1. change() Method

The change() method in jQuery attaches an event handler to input, textarea, and select elements, and is executed when the values of these elements change.

Example: In this example, display a warning when users select any option in the dropdown menu:

The output result appears as follows:

Note: For checkbox and radio buttons, the event is triggered immediately when users click to select. However, for text input, the event is activated after the element's value is modified.

4.2. focus() Method

The focus() method in jQuery attaches an event handler to selected elements (usually form controls and links) and is executed when the focus event is triggered.

Example: In this example, display a message when the text input receives focus:

The output result appears as follows:

4.3. blur() Method

The blur() method in jQuery attaches an event handler to form elements such as input, textarea, and select.

Example: In this example, illustrates how to use the blur() method:

The output result appears as follows:

4.4. submit() Method

The submit() method in jQuery attaches an event handler to form elements and is executed when users submit a form.

Example: In this example, display a message depending on the entered value when users submit the form:

The output result appears as follows:

Tip: We can submit the form by clicking the submit button or by pressing Enter.

5. Document / Window Event

Document / Window Event is triggered when the DOM (Document Object Model) is ready or when users resize or scroll the browser window, ... . Here are some jQuery methods used to handle these events.

5.1. ready() Method

The ready() method in jQuery specifies a function to be executed when the DOM is fully loaded.

Example: In this example, replace the text as soon as the DOM hierarchy is fully constructed and ready for manipulation.

The output result appears as follows:

5.2. resize() Method

The resize() method in jQuery attaches an event handler to the window element and is executed when the browser window size changes.

Example: In this example, display the current browser window width and height when users resize the window by dragging the corners:

The output result appears as follows:

5.3. scroll() Method

The scroll() method in jQuery attaches an event handler to windows or iframes that can scroll and is executed whenever the scroll position of the element changes.

Example: In this example, display a message when users scroll the browser window:

The output result appears as follows:

In this lesson, Mytour has just introduced you to Events in jQuery. In the next tutorial, Mytour will further introduce you to how to show/hide HTML elements using jQuery. Additionally, readers can refer to other articles on Mytour to explore more about the basic syntax of jQuery.