Package Exports

event-target-shim
event-target-shim/lib/commons.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (event-target-shim) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

event-target-shim

An implementation of W3C EventTarget interface, plus few extensions.

This provides EventTarget constructor that can inherit for your custom object.
This provides an utility that defines properties of attribute listeners (e.g. obj.onclick).

// The prototype of this class has getters and setters of `onmessage` and `onerror`.
class Foo extends EventTarget("message", "error") {
    //...
}

Installation

npm install --save event-target-shim

Or download from dist directory.

Usage

Basic

//-----------------------------------------------------------------------------
// import (with browserify, webpack, etc...).
const EventTarget = require("event-target-shim");

//-----------------------------------------------------------------------------
// define a custom type.
class Foo extends EventTarget {
}

//-----------------------------------------------------------------------------
// add event listeners.
let foo = new Foo();
foo.addEventListener("foo", event => {
    console.log(event.hello);
});
foo.addEventListener("foo", event => {
    if (event.hello !== "hello") {
        // event implements Event interface.
        event.preventDefault();
    }
});

//-----------------------------------------------------------------------------
// dispatch an event.
let event = document.createEvent("CustomEvent");
event.initCustomEvent("foo", /*bubbles*/ false, /*cancelable*/ false, /*detail*/ null);
event.hello = "hello";
foo.dispatchEvent(event);

//-----------------------------------------------------------------------------
// dispatch an event simply (non standard).
foo.dispatchEvent({type: "foo", hello: "hello"});

//-----------------------------------------------------------------------------
// dispatch a cancelable event.
if (!foo.dispatchEvent({type: "foo", cancelable: true, hello: "hey"})) {
    console.log("defaultPrevented");
}

//-----------------------------------------------------------------------------
// If `window.EventTarget` exists, `EventTarget` inherits from `window.EventTarget`.
if (foo instanceof window.EventTarget) {
    console.log("yay!");
}

The Extension for Attribute Listeners

//-----------------------------------------------------------------------------
// import (with browserify, webpack, etc...).
const EventTarget = require("event-target-shim");

//-----------------------------------------------------------------------------
// define a custom type with attribute listeners.
class Foo extends EventTarget("message", "error") {
}
// or non-variadic
class Foo extends EventTarget(["message", "error"]) {
}

//-----------------------------------------------------------------------------
// add event listeners.
let foo = new Foo();
foo.onmessage = event => {
    console.log(event.data);
};
foo.onerror = event => {
    console.log(event.message);
};
foo.addEventListener("message", event => {
    console.log(event.data);
});

//-----------------------------------------------------------------------------
// dispatch a event simply (non standard).
foo.dispatchEvent({type: "message", data: "hello"});
foo.dispatchEvent({type: "error", message: "an error"});

Use in ES5

Basic.

function Foo() {
    EventTarget.call(this);
}

Foo.prototype = Object.create(EventTarget.prototype, {
    constructor: {
        value: Foo,
        configurable: true,
        writable: true
    },

    //....
});

With attribute listeners.

function Foo() {
    EventTarget.call(this);
}

Foo.prototype = Object.create(EventTarget("message", "error").prototype, {
// or
// Foo.prototype = Object.create(EventTarget(["message", "error"]).prototype, {
    constructor: {
        value: Foo,
        configurable: true,
        writable: true
    },

    //....
});

Use with RequireJS

require(["https://cdn.rawgit.com/mysticatea/event-target-shim/v1.1.0/dist/event-target-shim.min.js"], function(EventTarget) {
    //...
});

API

declare class EventTarget {
    constructor();
    addEventListener(type: string, listener?: (event: Event) => void, capture: boolean = false): void;
    removeEventListener(type: string, listener?: (event: Event) => void, capture: boolean = false): void;
    dispatchEvent(event: Event | {type: string, cancelable?: boolean}): void;
}

// Define EventTarget type with attribute listeners.
declare function EventTarget(...types: string[]): EventTarget;
declare function EventTarget(types: string[]): EventTarget;