nk-crew / ivent

ivent

Helper functions for browser event listener

Table of Contents

• Import ivent
  • ESM
  • ESM CDN
  • UMD
  • UMD CDN
  • CJS (Bundlers like Webpack)
• Methods
  • on
  • one
  • off
  • trigger
• Custom Events
  • ready
  • mouseenter
  • mouseleave
  • pointerenter
  • pointerleave
• For Developers

Import ivent

Use one of the following examples to import script.

ESM

We provide a version of ivent built as ESM (ivent.esm.js and ivent.esm.min.js) which allows you to use ivent as a module in your browser, if your targeted browsers support it.

<script type="module">
  import { on, off } from "ivent.esm.min.js";
</script>

ESM CDN

<script type="module">
  import { on, off } from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
</script>

UMD

ivent may be also used in a traditional way by including script in HTML and using library by accessing window.ivent.

<script src="ivent.min.js"></script>

UMD CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ivent.min.js"></script>

CJS (Bundlers like Webpack)

Install ivent as a Node.js module using npm

npm install ivent

Import ivent by adding this line to your app's entry point (usually index.js or app.js):

import { on, off } from 'ivent';

Methods

on

one

DOM event listener:

import { on } from 'ivent';

on(document, 'click', (e) => {
  console.log('clicked', e);
});

Event listener with delegated target:

import { on } from 'ivent';

on(document, 'click', '.custom-element-selector', (e) => {
  console.log('clicked', e);
});

Custom event listener with namespace:

import { on } from 'ivent';

on(document, 'the-custom-event.with-namespace', (e) => {
  console.log('clicked', e);
});

off

Remove DOM event listener:

import { on } from 'ivent';

on(document, 'click', (e) => {
  console.log('clicked', e);
});

off(document, 'click');

Remove DOM event listener by namespace:

import { on } from 'ivent';

on(document, 'click.my-namespace', (e) => {
  console.log('clicked', e);
});

off(document, '.my-namespace');

trigger

Trigger event:

import { trigger } from 'ivent';

trigger(document, 'click');

Custom Events

ready

Create ready event which work in the same way as DOMContentLoaded with additional check for dom loaded. For example, if dom is already loaded, the ready event callback will be fired immediately.

Example:

import { on } from 'ivent';

on(document, 'ready', (e) => {
  console.log('dom ready', e);
});

mouseenter

mouseleave

pointerenter

pointerleave

Create mouseenter / mouseleave events using mouseover / mouseout so that event delegation works properly. Do the same for pointerenter / pointerleave and pointerover / pointerout.

Example:

import { on } from 'ivent';

on(document, 'mouseenter', 'button', (e) => {
  console.log('button mouseenter event created using mouseover', e);
});

For Developers

Installation

• Run npm install in the command line. Or if you need to update some dependencies, run npm update

Building

• npm run build to run build

Linting

• npm run js-lint to show eslint errors
• npm run js-lint-fix to automatically fix some of the eslint errors