crossvent

What is crossvent?

The crossvent npm package is a utility for handling cross-browser events. It provides a simple API to add, remove, and handle events in a way that works consistently across different browsers.

What are crossvent's main functionalities?

Adding Event Listeners

This feature allows you to add event listeners to DOM elements. The code sample demonstrates how to add a 'click' event listener to an element with the ID 'myElement'.

const crossvent = require('crossvent');
const element = document.getElementById('myElement');
function handleClick(event) {
  console.log('Element clicked!', event);
}
crossvent.add(element, 'click', handleClick);

Removing Event Listeners

This feature allows you to remove event listeners from DOM elements. The code sample shows how to add and then remove a 'click' event listener from an element with the ID 'myElement'.

const crossvent = require('crossvent');
const element = document.getElementById('myElement');
function handleClick(event) {
  console.log('Element clicked!', event);
}
crossvent.add(element, 'click', handleClick);
crossvent.remove(element, 'click', handleClick);

Triggering Events

This feature allows you to programmatically trigger events on DOM elements. The code sample demonstrates how to trigger a 'click' event on an element with the ID 'myElement'.

const crossvent = require('crossvent');
const element = document.getElementById('myElement');
function handleClick(event) {
  console.log('Element clicked!', event);
}
crossvent.add(element, 'click', handleClick);
crossvent.fabricate(element, 'click');

Other packages similar to crossvent

eventemitter3

EventEmitter3 is a high-performance event emitter for Node.js and the browser. It provides a similar API for adding, removing, and triggering events but is more focused on custom event handling rather than DOM events.

mitt

Mitt is a tiny (~200 bytes) functional event emitter. It provides a simple and fast way to handle custom events in both Node.js and the browser. Unlike crossvent, it does not specifically target DOM events but can be used for general event handling.

component-emitter

Component-emitter is a simple event emitter component for the browser and Node.js. It offers a similar API for event handling but is more lightweight and focused on custom events rather than cross-browser DOM events.

README

crossvent

Cross-platform browser event handling

The event handler API used by dominus.

Install

Using Bower

bower install -S crossvent

Using npm

npm install -S crossvent

API

The API exposes a few methods that let you deal with event handling in a consistent manner across browsers.

crossvent.add(el, type, fn, capturing?)

Adds an event listener fn of type type to DOM element el.

crossvent.add(document.body, 'click', function (e) {
  console.log('clicked document body');
});

crossvent.remove(el, type, fn, capturing?)

Removes an event listener fn of type type from DOM element el.

crossvent.add(document.body, 'click', clicked);
crossvent.remove(document.body, 'click', clicked);

function clicked (e) {
  console.log('clicked document body');
}

crossvent.fabricate(el, type, model?)

Creates a synthetic custom event of type type and dispatches it on el. You can provide a custom model which will be accessible as e.detail.

crossvent.add(document.body, 'sugar', sugary);
crossvent.fabricate(document.body, 'sugar', { onTop: true });

function sugary (e) {
  console.log('synthetic sugar' + e.detail.onTop ? ' on top' : '');
}

License

MIT