jQuery Events || Client Side Scripting || BCIS Notes

jQuery Events || Client Side Scripting || BCIS Notes

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:

jQuery Events

page5image40570432

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 click() Method

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 dblclick() Method

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 hover() Method

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 mouseenter() Method

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.

The mouseleave() Method

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 keypress() Method

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.

The keyup() Method

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 change() Method

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 focus() Method

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.

The submit() Method

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 ready() Method

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 resize() Method

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.

The scroll() Method

If you liked our content jQuery Events, then you will also like Introduction to jQuery

Be the first to comment

Leave a Reply

Your email address will not be published.


*