🚨 Time is Running Out: Reserve Your Spot in the Lucky Draw & Claim Rewards! START NOW

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

DataCamp
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
Udacity
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
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

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