Understanding and Handling jQuery Events Quickly and Effectively

You may remember JavaScript is an event-based coding language. Basically, this means that events define the performance of the program. This category includes all the user interactions, such as mouse clicks, touch screen swipes, or pressing something on one's keyboard.

By using jQuery events are handled in a simple and effective matter. In this tutorial, we will cover how to assign a particular event to your page and pass a function to it, as well as toggle jQuery event handlers. Not only will you find this more convenient, but it will also save you a great deal of time.

jQuery Events: Main Tips

• In JavaScript, events refer to the visitors actions on the webpage. They are registered by event listeners assigned to elements on the HTML DOM.
• The purpose of jQuery event methods is to manipulate these registered behaviors in a more convenient and advanced way.
• The event.result property returns the previous values of custom events.

Events Explained

In JavaScript and jQuery events can also be called user interactions. The term refers to an action of the user interacting with the browser. It is registered by an event listener, which can have functions assigned to specify how it reacts to the event.

Simple examples of jQuery events include:

• Moving the mouse over an element
• Clicking an element
• Pressing a key

There can also be various specifics for how events are listened to and handled.

In the table below, all of the jQuery events are listed:

Note: jQuery touch events are only relevant when a mobile touch screen is used (in most cases, a smart phone or a tablet).

Syntax

Assigning jQuery event listeners to elements is especially useful, as using pure JavaScript is clunky and harder to read than the jQuery way.

The syntax for applying event methods is very similar to any other jQuery statement that uses methods. Here's a basic example of a jQuery event method application:

$(document).ready(() => {
    $("div").click(function() {
        $(this).hide();
    });
});

In this example, $("div") refers to the selector, and click defines the jQuery event that triggers the action on click jQuery event. As you might remember from the selectors tutorial, $(document).ready() makes it so the action only begins when the page is fully loaded.

The on click jQuery event might be replaced by any of the events specified in the table above. When the specified event occurs on the selected object, the code block in the jQuery event method's definition will be executed. In the example below, you can see dblclick being used:

$(document).ready(() => {
    $("div").dblclick(function() {
        $(this).hide();
    });
});

To attach one or more event handlers to a selected element, use jQuery .on()
method. See how it's used in an example below:

$("div").on("click", function() {
   $(this).css("background-color", "red");
});

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Toggling Handlers

The toggle method is set apart from the rest of the mouse events because it may seem a bit confusing without understanding how to use it.

This method assigns two event handlers which alternate whenever the event occurs. The syntax for this method is not complicated either - it includes two functions to be called on the event, which are separated by a comma.

See the example below. In it, the same button makes an element show and hide:

$("button").click(() => {
    $("div").toggle();
});

jQuery Event Result

The event.result property returns the previous values of custom events. Look at this simple example implementing this property:

$("button").click(() => {
    return "Hello there!";
});
$("button").click((event) => {
    $("input").val(event.result);
    $("p").html(event.result);
});

jQuery Events: Summary

• In JavaScript, user interactions such as clicking or hovering on a certain element are called events.
• To register these events, jQuery event listeners are assigned to HTML DOM elements.
• Events fired by touching a mobile touch screen are called jQuery touch events.
• jQuery event methods allow developers to easily and professionaly modify these registered behaviors.