Event Data: Learn to Apply Properties to Event Objects

Event Data: Main Tips

• jQuery event objects are to be assigned to event handler jQuery. You can apply various event properties for consistent user experience.
• event.data property refers to the optional event data, passed to the event method.
• You may also use event.isDefaultPrevented, event.isImmediatePropagationStopped, event.isPropagationStopped, and event.namespace properties.
• These properties check whether specific methods are applied to elements, and return jQuery namespaces after events are invoked.

event.data

The event.data property returns the optional data parameter value, defined with the event method. In the example below, you can see click event method is used, and different values show up as you click various elements:

$("p").each(function(i) {
   $(this).on("click", {x:i}, function(event) {
       alert("Clicked: " + $(this).index() + event.data.x);
   });
});

event.isDefaultPrevented

The event.isDefaultPrevented checks whether the preventDefault() method was used on a specific event object. See the JavaScript alert pop up to display the answer in the example below:

$("a").click((event) => {
    event.preventDefault();
    alert("Is it true that preventDefault() was called? " + event.isDefaultPrevented());
});

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

event.isImmediatePropagationStopped

The event.isImmediatePropagationStopped method checks whether the event.stopImmediatePropagation() was ever used on the event object. The alert box in the example below will return a boolean value as you click the element:

$("p").click((event) => {
    event.stopImmediatePropagation();
    alert(event.isImmediatePropagationStopped());
});

event.isPropagationStopped

The event.isPropagationStopped method checks whether the event.stopPropagation() method was used on the event object. In the example below, you will again see an alert when you click the element:

$("div").click((event) => {
    event.stopPropagation();
    alert(event.isPropagationStopped());
});

event.Namespace

The event.namespace property returns the specified jQuery namespace when the event gets triggered. In the example below, it pops up as an alert:

$("input").on("custom.sampleNamespace", (event) => {
    alert(event.namespace);
});
$("input").click(function(event) {
    $(this).trigger("custom.sampleNamespace");
}); 
$("button").click(() => {
    $("input").off("custom.sampleNamespace");
});