Event in jQuery

Event in jQuery

Refer to the following jQuery lesson of Taimienphi.vn to learn about Events in jQuery, how to handle events in jQuery.

1. What is an event?

Events are usually triggered by user interaction with the website, such as clicking a button or link, entering text into a frame, pressing a key on the keyboard, moving the mouse pointer, etc. . In some cases the browser may automatically trigger events, such as page loading, ….

jQuery enhances the handling of basic events by providing event methods for most browser events, such as methods. ready (), click (), keypress (), focus (), blur (), change (), ….

For example: To execute some JavaScript code when the DOM is ready, we can use the jQuery ready () method as shown below:

Note:$ (document) .ready () is an event used to manipulate a secure page with jQuery. The code included in this event only runs when the DOM page is ready, ie when the document is ready to be manipulated.

Basically, jQuery events are classified into four main groups: mouse events, keyboard events, form events and document / window events.

2. Mouse event

Mouse event is triggered when the user clicks on some element, or moves the mouse cursor, …. Here are some commonly used jQuery methods for handling mouse events.

2.1. Click () method

Method click () In jQuery attaches an event handler to the selected element for the “click” event. The attachment function is executed when the user clicks the element.

For example: in the example below will hide the elements p on the page when the user clicks:

The output will look like the following:

Note: key word “this“in the jQuery event handler function is a reference to the element that contains the event.

2.2. Dblclick () method

Method dblclick () In jQuery attach an event handler function to the element for the “dblclick” event. The attachment function is executed when the user double-clicks the element.

For example: The following example hides the elements p When the user double-clicks on this element:

The output will look like the following:

2.3. Hover method ()

Method hover () In jQuery attaches one or two event handlers to selected elements, and is executed when the user moves and leaves the mouse cursor on the element. The first function is executed when the user hovers the mouse pointer over the element, and the second function is executed when the user removes the mouse pointer from the element.

For example: In the example below will highlight the element p when the user places the mouse pointer on the element and when the user moves the cursor to another position:

The output will look like the following:

Tips: we can consider the method hover () is a combination of methods mouseenter () and mouseleave () in jQuery.

2.4. Mouseenter () method

Method mouseenter () In jQuery attach event handlers to selected elements, which are executed when the mouse is placed on the element.

For example: The following example will add an effect layer to highlight the element p when the user places the mouse pointer over the element:

The output will look like the following:

2.5. Mouseleave () method

Method mouseleave () In jQuery attaches an event handler function to the selected element and is executed when the mouse pointer leaves that element.

For example: In the example below, we will remove the highlight effect layer from the element p when the user leaves the mouse cursor for an element:

The output will look like the following:

3. Keyboard Event

Keyboard Event activated when a user presses or releases his hand from a key on the keyboard. Here are some jQuery methods used to handle the Keyboard Event:

3.1. Keypress () method

Method keypress () In jQuery attaches an event handler to the selected elements (usually a form control) that is executed when the browser receives input from the user keyboard.

For example: The following example will display the message when the keypress event is triggered and the number of times triggered when the user presses the key on the keyboard:

The output will look like the following:

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

3.2. Keydown method ()

Method keydown () In jQuery attach event handlers to selected elements (usually form controls) that are executed when the user presses the first key on the keyboard.

For example: The following example will display the message when the keydown event is triggered and the number of times triggered when the user presses the key on the keyboard:

The output will look like the following:

3.3. Keyup () method

Method keyup () In jQuery attaches an event handler to the selected element (usually the form control) that is executed when the user releases a key from the keyboard.

For example: The following example shows the message when the keyup event is triggered and the number of times the event is triggered when the user presses and releases his hand from a key on the keyboard.

The output will look like the following:

Tips: Keyboard Event in jQuery can be attached to any element, but the event is only sent to the central element. That’s why keyboard events are often included in form controls such as input text boxes, etc.

4. Form Event

Form Event is triggered when the user modifies form control values ​​such as entering text in the text box, selecting any options in the box, etc. Here are some jQuery methods used to handle form events:

4.1. Change () method

Method change () In jQuery attach an event handler function to the element input, textarea and select, executed when the values ​​of these elements change.

For example: in the example below, a warning will be displayed when the user selects any option in the drop down menu:

The output will look like the following:

Note: With checkboxes, radio buttons, the event will be triggered immediately when the user clicks to select, but for the input text, the event is triggered after the element has been modified.

4.2. Focus () method

Method focus () In jQuery attach event handlers for selected elements (usually form controls and links) that are executed when the focus event is triggered.

For example: The following example will display the message when text input is activated:

The output will look like the following:

4.3. Blur () method

Method blur () In jQuery attach an event handler function to the form elements like input, textarea and select.

For example: The following example illustrates how to use the blur () method:

The output will look like the following:

4.4. Method submit ()

Method submit () In jQuery attach event handler function for form elements to be executed when the user submits a form.

For example: The following example will display the message, depending on the value entered when the user submits the form:

The output will look like the following:

Tips: we can submit the form by clicking the submit button or we can press Enter.

5. Document / Window Event

Document / Window Event is enabled when the DOM (Document Object Model) page is ready or when the user resizes, scrolls the browser window, etc. Here are some jQuery methods used to handle these events.

5.1. Ready () method

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

For example: The following example will replace the text as soon as the DOM hierarchy is fully built and ready to be manipulated.

The output will look like the following:

5.2. Resize () method

Method resize () In jQuery attach event handler for the window element to be executed when the browser window size changes.

For example: The following example shows the current browser window width and height when the user resizes the window by dragging the corners:

The output will look like the following:

5.3. Scroll () method

Method scroll () in jQuery attach event handlers for windows elements or scrollable iframes, which are executed whenever the element’s scroll position changes.

For example: The following example will display the message when the user scrolls the browser window:

The output will look like the following:

https://thuthuat.taimienphi.vn/event-su-kien-rong-jquery-51484n.aspx
The above lesson Taimienphi.vn has just introduced you to Events in jQuery. In the next lesson, Taimienphi.vn will introduce you further on how hide HTML elements with jQuery. In addition, readers can refer to some other articles already on Taimienphi.vn to learn more about the basic syntax of jQuery.