jQuery Events
jQuery events enhances the basic event-handling mechanisms by offering the events methods for most native browser events, some of these methods are ready(), click(), keypress(), focus(), blur(), change(), etc. For example, to execute some JavaScript code when the DOM is ready, you can use the jQuery ready() method, like this:
In general, the events can be categorized into four main groups — mouse events, keyboard events, form events, and document/window events.
Mouse Events
A mouse event is fired when the user clicks some element, moves the mouse pointer, etc. Here’re some commonly used jQuery methods to handle the mouse events.
The click() Method
The jQuery click() method attaches an event handler function to the selected elements for “click” event. The attached function is executed when the user clicks on that element. The following example will hide the <p> elements on a page when they are clicked.
The dblclick() Method
The jQuery dblclick() method attaches an event handler function to the selected elements for “dblclick” event. The attached function is executed when the user double-clicks on that element. The following example will hide the <p> elements when they are double-clicked.
The hover() Method
The jQuery hover() method attaches one or two event handler functions to the selected elements that are executed when the mouse pointer enters and leaves the elements. The first function is executed when the user places the mouse pointer over an element, whereas the second function is executed when the user removes the mouse pointer from that element.
The following example will highlight <p> elements when you place the cursor on it, the highlighting will be removed when you remove the cursor.
The mouseenter() Method
The jQuery mouseenter() method attaches an event handler function to the selected elements that are executed when the mouse enters an element. The following example will add the class highlight to the <p> element when you place the cursor on it.
The mouseleave() Method
The jQuery mouseleave() method attaches an event handler function to the selected elements that are executed when the mouse leaves an element. The following example will remove the class highlight from the <p> element when you remove the cursor from it.
Keyboard Events
The keypress() Method
The jQuery keypress() method attaches an event handler function to the selected elements (typically form controls) that are executed when the browser receives keyboard input from the user. The following example will display a message when the keypress event is fired and how many times it is fired when you press the key on the keyboard.
The keyup() Method
The jQuery keyup() method attaches an event handler function to the selected elements (typically form controls) that are executed when the user releases a key on the keyboard. The following example will display a message when the keyup event is fired and how many times it is fired when you press and release a key on the keyboard.
Form Events
A form event is fired when a form control receives or loses focus or when the user modifies a form control value such as by typing text in a text input, select an option in a select box, etc. Here’re some commonly used jQuery methods to handle the form events.
The change() Method
The jQuery change() method attach an event handler function to
the <input>, <textarea> and <select> elements that is executed when its value changes. The following example will display an alert message when you select any option in the dropdown select box.
The focus() Method
The jQuery focus() method attaches an event handler function to the selected elements (typically form controls and links) that is executed when it gains focus. The following example will display a message when the text input receives focus.
The submit() Method
The jQuery submit() method attaches an event handler function to the <form> elements that are executed when the user is attempting to submit a form. The following example will display a message depending on the value entered when you try to submit the form.
Document/Window Events
Events are also triggered in a situation when the page DOM (Document Object Model) is ready or when the user resizes or scrolls the browser window, etc. Here’re some commonly used jQuery methods to handle such kinds of events.
The ready() Method
The jQuery ready() method specifies a function to execute when the DOM is fully loaded.
The following example will replace the text of the paragraph as soon as the DOM hierarchy has been fully constructed and ready to be manipulated.
The resize() Method
The jQuery resize() method attaches an event handler function to the window element that is executed when the size of the browser window changes.
The following example will display the current width and height of the browser window when you try to resize it by dragging its corners.
The scroll() Method
The jQuery scroll() method attaches an event handler function to the window or scrollable iframes and elements that are executed whenever the element’s scroll position changes.
If you liked our content jQuery Events, then you will also like Introduction to jQuery
Leave a Reply