hooked74 / events-polyfill

Polyfills the constructor syntax for creating events in browsers that don't natively support it.

events-polyfill

Table of Contents

• Install
• Introduction
• Usage
• Affected browsers
• Notes
  • Argument validation
  • MouseEvent key modifiers
  • Bypassing the check for the new keyword
• List of polyfilled constructors
• List of omitted constructors
• License

Install

npm install @hooked74/events-polyfill

Introduction

The original method of dynamically creating events in JavaScript used an API inspired by Java:

var event = document.createEvent("MouseEvent");
event.initMouseEvent("click", false, false, window, null, null, null, 100, 0);

Many event interfaces have their own initializer methods with wildly differing argument lists. For example, initMouseEvent() takes more arguments than initKeyboardEvent().

The new method of creating events (part of the DOM Living Standard) is to use a simple constructor function.

var event = new MouseEvent("click", {
  clientX: 100,
  clientY: 0
});

The constructor functions work the same way across all event interfaces, each taking only two arguments:

1. A string describing the type of the event, and
2. an optional plain object which provides the values of the event's properties.

This polyfill enables the use of this constructor syntax in browsers that don't natively support it.

Usage

Use the polyfilled constructor functions as documented:

var simpleEvent = new CustomEvent("foo");
var detailedEvent = new CustomEvent("bar", {
  /* ... */
});

Affected browsers

The main goal of this polyfill is to allow the use of event constructors in Chrome 15 and above, Firefox 11 and above, Safari 6 and above, and Internet Explorer 9 and above. It has no effect in IE8 or below.

Notes

Argument validation

In accordance with the spec, the constructor functions created by this polyfill will throw a TypeError under the following scenarios:

• No arguments are provided
• The second argument is not an Object (and is not null or undefined)
• The new keyword is not used

MouseEvent key modifiers

When creating a MouseEvent, KeyboardEvent, or WheelEvent, there are extra key modifiers that can be provided (in addition to altKey, ctrlKey, metaKey, and shiftKey). These are defined in the EventModifierInit dictionary. For example:

var k = new KeyboardEvent("keydown", { modifierCapsLock: true });
k.getModifierState("CapsLock");
// => true

These extra modifiers work as expected for the polyfilled KeyboardEvent and WheelEvent constructors, but are ignored in the polyfilled MouseEvent constructor. This is because initKeyboardEvent() and initWheelEvent() accept these extra modifiers, but initMouseEvent() only accepts altKey, ctrlKey, metaKey, and shiftKey.

Bypassing the check for the new keyword

As mentioned above, there are checks in place to ensure that the polyfilled constructors can't be invoked without the new keyword:

var g = GamepadEvent("gamepadconnected"); // TypeError
var k = KeyboardEvent.call(new KeyboardEvent("keydown"), "keyup"); // TypeError
var c = CustomEvent.call(CustomEvent.prototype, "foo"); // TypeError

The test for usage of the new keyword can be fooled, but only by statements that are specifically crafted to do so, such as the following:

var dummy = Object.create(MouseEvent.prototype);
MouseEvent.call(dummy, "click"); // No TypeError is thrown.

However, the constructor functions always return a new object; they never interact with the this object on which they are called. In the example above, trying to access dummy.type will throw a TypeError, because dummy was not initialized by the constructor; it's just a copy of MouseEvent.prototype.

List of polyfilled constructors

Some of the events below don't have any public documentation for their initializer method. These events were still polyfilled because (a) their initializer method would only require a single unique argument, and / or (b) some other evidence was found for the existence of the initializer method.

Event interface	Initializer method	Notes
AnimationEvent	initAnimationEvent() (MDN)
ClipboardEvent	initClipboardEvent() (W3C)	In Chrome (tested in 52 & 53), the native constructor throws a TypeError ("illegal constructor").
CloseEvent	initCloseEvent() (MDN)
CompositionEvent	initCompositionEvent() (MDN)
CustomEvent	initCustomEvent() (MDN)
DeviceMotionEvent	initDeviceMotionEvent() (MSDN)
DeviceOrientationEvent	initDeviceOrientationEvent() (MSDN)
DragEvent	initDragEvent() (MSDN)
ErrorEvent	initErrorEvent() (MSDN)
FocusEvent	initFocusEvent() (MSDN)
GamepadEvent	initGamepadEvent()
HashChangeEvent	initHashChangeEvent()
KeyboardEvent	initKeyboardEvent() (MSDN)	initKeyboardEvent() is always used; never initKeyEvent().
MediaStreamEvent	initMediaStreamEvent()
MessageEvent	initMessageEvent() (MSDN)
MouseEvent	initMouseEvent() (MDN)
PageTransitionEvent	initPageTransitionEvent()
PointerEvent	initPointerEvent() (MSDN)	Accounts for the fact that the interface is prefixed in IE 10 as MSPointerEvent (the constructor is still polyfilled and made available as PointerEvent). As of September 2016, PointerEvent is not implemented in Chrome (but is under development).
PopStateEvent	initPopStateEvent() (MSDN)
ProgressEvent	initProgressEvent() (MDN)
StorageEvent	initStorageEvent() (MDN)
TouchEvent	initTouchEvent() (Apple)	Accounts for the fact that Chrome does not follow the W3C spec and expects a different argument list to initTouchEvent.
TransitionEvent	initTransitionEvent() (MDN)
UIEvent	initUIEvent() (MDN)
UserProximityEvent	initUserProximityEvent()
WebGLContextEvent	initWebGLContextEvent()
WheelEvent	initWheelEvent() (MSDN)

List of omitted constructors

The following event constructors are not polyfilled by this script.

Event interface	Reason for omission
GestureEvent	Non-standard.
MouseScrollEvent	Non-standard. WheelEvent is the standards-based interface for mouse wheel scrolling events, and initWheelEvent() is supported in IE9+.
MouseWheelEvent	Non-standard. WheelEvent is the standards-based interface for mouse wheel scrolling events, and initWheelEvent() is supported in IE9+.
MutationEvent	Deprecated; inconsistent implementation across different browsers. Use MutationObserver instead.

License

events-polyfill uses the MIT License.