Commonly used jQuery Events

Introduction

Let us begin by learning about jQuery. jQuery is a small and fast Javascript library. John Resig founded this library in 2006. jQuery was created to aid in the navigation and manipulation of the HTML DOM tree, event handling, CSS animation, and Ajax.

Web pages are built on interaction. Users' actions, including moving their mouse around the website, clicking on items, and typing in text boxes, are referred to as events.

In addition to user events like when the page loads, when the video starts or stops, and so on, when something in a webpage moves from being static to dynamic, the browser effectively indicates that something has happened. This announcement allows developers to "listen" to events and reply accordingly.

The Syntax for Event Methods

jQuery extends the basic event-handling capabilities by providing event methods for most native browser events, such as ready(), click(), keypress(), focus(), blur(), change(), and so on.

For example, to run some JavaScript code when the DOM is ready, use the jQuery ready() method, as shown below:

In general, events are classified into four types: mouse events, keyboard events, form events, and document/window events. The sections that follow will provide a brief overview of all of these events as well as associated jQuery methods one by one.

jQuery Event Methods

The jQuery library includes methods for dealing with DOM events. The vast majority of jQuery methods relate to native DOM events.

The table below covers all jQuery methods and their corresponding DOM events.

Event Handling

To handle DOM events using jQuery methods, first, obtain the reference to the DOM element(s) using a jQuery selector and then call the relevant jQuery event function.

The following is jQuery syntax for binding a click event to all <div> elements in an HTML document:

The following step is to specify an action in response to the click event. The syntax for defining a function that will be performed when the click event is fired is as follows. This function is known as the jQuery Event Handler.

Example showing how to handle the button click event

The sample below explains how to handle a button-click event.

OR in detail below as:

Event Object

Each function that handles an event using jQuery receives an event object. Important properties and methods for inter-consistency are included in the event object, such as target, pageX, pageY, relatedTarget, and so on.

The event properties/attributes listed below are available and safe to access across platforms:

• pageX - For mouse events, this specifies the horizontal coordinate of the event in relation to the page origin.
• pageY - For mouse events, this specifies the vertical coordinate of the event in relation to the page origin.
• screenX - For mouse events, specifies the horizontal coordinate of the event relative to the screen origin.
• screenY - For mouse events, it is the vertical coordinate of the event in reference to the screen origin.

This Keyword in the Event Handler

As a result, if the event handler is called, the color of the HTML element is changed. As a result, you make the best of the situation. The HTML element that is currently managing the event, the HTML element that "owns" the copy of doSomething() each time the function is called, is referred to here.

Example:

Hover Events

The hover() method of jQuery attaches one or two event handler functions to the selected elements, which are run when the mouse cursor enters and exits the elements.

When the user moves the mouse pointer over an element, the first function is called, and the second function is called when the user moves the mouse pointer away from that element. The following example highlights <p> elements when the cursor is placed over them; the highlighting is deleted when the cursor is removed.

Event Binding using on()

Using the on method, you can attach an event handler for one or more events to the specified items. Internally, all shorthand methods employ the on() method. The on() function provides extra event binding options.

Syntax:

• types - One or more event types separated by spaces and optional namespaces
• string selector - string selector
• data - information to be given to the event handler. When an event occurs, data is generated.
• fn - A function that is called when the event occurs.

Example:

In the above example, we specified the ':button' selector. So only click events caused by buttons in the <div> tag with the id myDiv will be handled.

Binding Multiple Events

jQuery also allows you to connect multiple event handlers to events. For example, you might bind three separate event handler routines to a page element's click event using the bind() function three times.

Example:

When the click event happens, the first event handler is executed, then the second, then the third.

Specify Named Function as Event Handler

You can write separate functions and use them as handlers. If you want to utilize the same handler for different events or events on different elements, this is useful.

Example:

The jQuery on() method replaces the live() and delegate() methods.

Event Bubbling

Event bubbling is a method of delivering an event to its desired destination that works as follows: When an item (such as a button) is clicked, an event is triggered. If the object contains an event handler, it is called. The event then propagates to the object's parent (much like a bubble in water).

Syntax:

• type: A word that designates the kind of event.
• listener: The function that should be called when the specified type of event occurs.
• A Boolean value is userCapture. A Boolean value represents the event phase. UseCapture is set to false by default. It means it is in the bubbling stage.

Example:

In the previous example, we handled the click event of the <div> element with jQuery. If you click on <div>, the alert message 'DIV clicked' will appear.

However, if you click on <span>, an alert message 'SPAN clicked' will appear even if we have not handled the click event of <span>. This is known as event bubbling. The event floats up to the document level in the DOM structure until it is found.

Remove event handler using off()

We can use the off() method in jQuery to remove event handlers attached to the on() method.

To turn off an event handler, we need to choose the selector on which the event handler is to be removed. Then, use the off() method to remove the event.

Let's look at an example to understand it clearly.

When you run this code, you can see that the <h4> element has an event associated with it. You can see the event by clicking on the <h4> element. If you click the button, it will invoke the off() method, which will turn off the event associated with the <h4> element.