Published by: Sujan
Published date: 16 Jun 2021
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.
A mouse event is fired when the user click some element, move the mouse pointer etc. Here're some commonly used jQuery methods to handle the mouse events.
The jQuery click() method attach 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
elements on a page when they are clicked.
The jQuery dblclick() method attach 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
elements when they are double-clicked.
The jQuery hover() method attach one or two event handler functions to the selected elements that is executed when the mouse pointer enters and leaves the elements. The first function is executed when the user place 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
elements when you place the cursor on it, the highlighting will be removed when you remove the cursor.
The jQuery mouseenter() method attach an event handler function to the selected elements that is executed when the mouse enters an element. The following example will add the class highlight to the
element when you place the cursor on it.
The jQuery mouseleave() method attach an event handler function to the selected elements that is executed when the mouse leaves an element. The following example will remove the class highlight from the
element when you remove the cursor from it.
The jQuery keypress() method attach an event handler function to the selected elements (typically form controls) that is executed when the browser receives keyboard input from the user. The following example will display a message when the kypress event is fired and how many times it is fired when you press the key on the keyboard.
The jQuery keyup() method attach an event handler function to the selected elements (typically form controls) that is 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.
A form event is fired when a form control receive or loses focus or when the user modify a form control value such as by typing text in a text input, select any 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 dropdown select box.
The focus() Method
The jQuery focus() method attach 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 receive focus.
The submit() Method
The jQuery submit() method attach an event handler function to
the <form> elements that is 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 resize or scrolls the browser window, etc. Here’re some commonly used jQuery methods to handle such kind of events.
The ready() Method
The jQuery ready() method specify a function to execute when the DOM is fully loaded.
The following example will replace the paragraphs text as soon as the DOM hierarchy has been fully constructed and ready to be manipulated.
The resize() Method
The jQuery resize() method attach 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 attach an event handler function to the window or scrollable iframes and elements that is executed whenever the element’s scroll position changes.
