Code has been added to clipboard!

Event Data: Learn to Apply Properties to Event Objects

Reading time 2 min
Published Dec 29, 2017
Updated Oct 9, 2019

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:

Example
$("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:

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

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:

Example
$("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:

Example
$("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:

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

Latest Coupon Found:

Verified STAFF PICK

TOP-RATED CODING COURSES

Learn the skills of tomorrow

The best time to learn programming is now - follow this link to access 100+ coding courses and enjoy learning at a very low cost!

Expiration date: 22/04/2021
2287 People Used
Only 92 Left
Rating
5.0