Dojo FAQ: What properties are available to me on the event object when using dojo/on?

By on April 26, 2013 11:20 am

The dojo/on module not only provides a simple, consistent interface for registering event handlers, it also ensures that the event object passed to your handler implements the W3C event model (W3C recommendation, MDN reference).

While most web browsers provide DOM events in a manner compliant with the W3C model, prior to version 9 Internet Explorer implemented its own model with the attachEvent method and some different properties on the event object.

Using dojo/on allows you to interact with event objects using the W3C event model regardless of the web browser. Specifically, the following properties and methods are added to event objects in IE8 and below (see the MDN reference for details – keep in mind some properties only apply to certain event types, like KeyboardEvent and MouseEvent):

  • target
  • currentTarget
  • relatedTarget
  • charCode
  • keyChar
  • charOrCode
  • stopPropagation()
  • stopImmediatePropagation()
  • preventDefault()

Non-standard MouseEvent Properties

The properties pageX, pageY, offsetX, offsetY, layerX, and layerY are not normalized as it is expensive and often not needed, but the dojo/dom-geometry module provides a convenient method for doing so: normalizeEvent.

require([
    'dojo/on',
    'dojo/dom-geometry'
], function(on, domGeom){
    on('button', 'click', function(event){
        domGeom.normalizeEvent(event);
        console.log(event.pageX, event.offsetY, event.layerX);
    });
});

In Closing

Using Dojo provides an easy, consistent API across web browsers, smoothing out incompatibilities and inconsistencies, with a focus on adhering to open standards. Even if you’re not ready to update existing code that depends on certain properties (like layerX, layerY), you can still start using Dojo and take advantage of normalization methods to ensure your existing code works as expected.

Comments

  • Joshua Boshi

    Very useful summary! Thanks