Socket
Socket
Sign inDemoInstall

event-target-shim

Package Overview
Dependencies
0
Maintainers
1
Versions
27
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

event-target-shim

An implementation of WHATWG EventTarget interface.


Version published
Maintainers
1
Weekly downloads
15,079,037
decreased by-10.19%

Weekly downloads

Package description

What is event-target-shim?

The event-target-shim npm package provides a cross-platform, shim implementation of the EventTarget interface, allowing developers to use a consistent API for event handling across different environments. It supports the standard addEventListener, removeEventListener, and dispatchEvent methods, along with custom event types. This makes it useful for projects that need to handle events in both browser and non-browser environments, such as Node.js applications or web components.

What are event-target-shim's main functionalities?

Basic Event Handling

This demonstrates how to create an instance of EventTarget, add an event listener for a custom event type, and then dispatch an event of that type. It's the basic usage for handling custom events.

const EventTargetShim = require('event-target-shim');
const myEventTarget = new EventTargetShim();

myEventTarget.addEventListener('customEvent', function(event) {
  console.log(`Received: ${event.type}`);
});

myEventTarget.dispatchEvent(new EventTargetShim.Event('customEvent'));

Using Options for addEventListener

This example shows how to use the `once` option with `addEventListener` to automatically remove the event listener after it has been invoked once, demonstrating the package's support for event listener options.

const EventTargetShim = require('event-target-shim');
const myEventTarget = new EventTargetShim();

myEventTarget.addEventListener('customEvent', function(event) {
  console.log(`Received: ${event.type}`);
}, { once: true });

myEventTarget.dispatchEvent(new EventTargetShim.Event('customEvent'));
myEventTarget.dispatchEvent(new EventTargetShim.Event('customEvent'));

Other packages similar to event-target-shim

Readme

Source

event-target-shim

npm version Downloads/month Build Status Coverage Status Dependency Status

An implementation of WHATWG EventTarget interface and WHATWG Event interface. This implementation supports constructor, passive, once, and signal.

This implementation is designed ...

  • Working fine on both browsers and Node.js.
  • TypeScript friendly.

💿 Installation

Use npm or a compatible tool.

npm install event-target-shim

📖 Getting started

import { EventTarget, Event } from "event-target-shim";

// constructor (was added to the standard on 8 Jul 2017)
const myNode = new EventTarget();

// passive flag (was added to the standard on 6 Jan 2016)
myNode.addEventListener(
  "hello",
  (e) => {
    e.preventDefault(); // ignored and print warning on console.
  },
  { passive: true }
);

// once flag (was added to the standard on 15 Apr 2016)
myNode.addEventListener("hello", listener, { once: true });
myNode.dispatchEvent(new Event("hello")); // remove the listener after call.

// signal (was added to the standard on 4 Dec 2020)
const ac = new AbortController();
myNode.addEventListener("hello", listener, { signal: ac.signal });
ac.abort(); // remove the listener.
  • For browsers, use a bundler such as Webpack to bundle.
    • If you want to support IE11, use import {} from "event-target-shim/es5" instead. It's a transpiled code by babel. It depends on @baebl/runtime (^7.12.0) package.
  • The AbortController class was added to the standard on 14 Jul 2017. If you want the shim of that, use abort-controller package.

📚 API Reference

See docs/reference.md.

💥 Migrating to v6

See docs/migrating-to-v6.md.

📰 Changelog

See GitHub releases.

🍻 Contributing

Contributing is welcome ❤️

Please use GitHub issues/PRs.

Development tools

  • npm install installs dependencies for development.
  • npm test runs tests and measures code coverage.
  • npm run watch:mocha runs tests on each file change.

Keywords

FAQs

Last updated on 07 Jan 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc