ivent
v0.2.0
Published
Helper functions for browser event listener
Downloads
8
Maintainers
Readme
ivent
Helper functions for browser event listener
Table of Contents
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, runnpm update
Building
npm run build
to run build
Linting
npm run js-lint
to show eslint errorsnpm run js-lint-fix
to automatically fix some of the eslint errors