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());
});

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");
});