How to Use JavaScript’s Event Object to Program with HTML

Any event handler in JavaScript can receive an Event object that describes the event. Even when you programmatically assign an event handler to an event, the event handler still has access to the Event object. The Event object can tell you a number of things about the application. It provides access to constants, properties, and methods.

The three constants deal with how your application works with a particular browser. When two elements, a parent and a child, both target the same event handler, the browser must choose which element should be serviced by the event handler first. There are two completely different strategies for accomplishing this task: capturing and bubbling.

The strategy that your application sees depends on the browser you’re working with. A discussion of the details of these strategies is complex, and you should write your code without any thought of a particular element-processing order in mind. Check here to read more about these strategies.

The following list describes the Event object constants:

CAPTURING_PHASE: The browser is using the capturing method, and the parent element is serviced first.

AT_TARGET: The current event is being serviced by the event handler. This constant applies to every browser no matter which strategy the browser applies.

BUBBLING_PHASE: The browser is using the bubbling method, where the child element is serviced first.

The properties that the Event object provides can tell you some interesting facts about the event, such as which element is calling and when it called the event handler. Discovering details about the elements that have called the event handler can help the event handler provide better processing. The following list describes the properties associated with the Event object:

bubbles: Returns true when there’s a bubbling event taking place.

cancelable: Returns true when the application can cancel an event, so that its default action can’t occur. There are many reasons to cancel an event, but most of them involve error conditions of some sort. For example, a user might not enter data correctly, so submitting the data would result in an error, and the application can cancel the submission.

currentTarget: Provides access to an object that defines the element that called the event handler. In this case, the focus is on the event listeners rather than directly on the element.

eventPhase: Specifies the current event phase as a numeric value. You use the Event object constants to perform a comparison in this case.

target: Provides access to an object that defines the element that called the event handler. In this case, the focus is directly on the element rather than any event listeners associated with it.

timeStamp: Defines the time at which the event occurred in milliseconds. You must use one of the Date object methods to convert the output of this property into a human-readable form.

Even though the standard says that timeStamp should contain the number of milliseconds since January 1, 1970, many browsers provide other values, such as the number of milliseconds since the browser first started. Consequently, you can’t use this value to obtain a specific time unless the browser and platform support this feature. However, you can always use this property to determine the time between events.

type: Provides the name of the event. For example, if the user clicks a button and the onclick listener calls the event handler, you see click as output.

The Event object methods tend to change the way in which the application processes the event. For example, an application may choose to cancel an event if the conditions for completing it are unacceptable. The following list describes each of the Event object methods in more detail:

initEvent(): Defines specifics about an event:

Event type

The event’s ability to bubble

Whether the application can cancel the event's default action

preventDefault(): Cancels the event’s default action. In other words, the actions that normally take place by default won’t take place.

stopPropagation(): Stops further propagation of the event. Generally, this means that the application won’t call any additional event handlers. You can use this feature when an event handler has answered all of the event’s needs and there’s no additional processing required.