# ivent

> Helper functions for browser event listener

Latest version **0.2.0** (published 2023-11-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install ivent
pnpm add ivent
yarn add ivent
bun add ivent
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2023-11-27 |
| First published | 2023-11-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 151.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | nK |
| Maintainers | nk-o |
| Keywords | events, addEventListener, removeEventListener, on, off, once |

## Links

- npm: https://www.npmjs.com/package/ivent
- Repository: https://github.com/nk-crew/ivent
- Issues: https://github.com/nk-crew/ivent/issues
- npm.io page: https://npm.io/package/ivent

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 0.2.0 (latest) — 2023-11-27
- 0.1.1 — 2023-11-27
- 0.1.0 — 2023-11-27

## README

# ivent <!-- omit in toc -->

![ivent.min.js](https://img.badgesize.io/nk-crew/ivent/master/dist/ivent.min.js?compression=gzip)

Helper functions for browser event listener

## Table of Contents <!-- omit in toc -->

- [Import ivent](#import-ivent)
  - [ESM](#esm)
  - [ESM CDN](#esm-cdn)
  - [UMD](#umd)
  - [UMD CDN](#umd-cdn)
  - [CJS (Bundlers like Webpack)](#cjs-bundlers-like-webpack)
- [Methods](#methods)
  - [on](#on)
  - [one](#one)
  - [off](#off)
  - [trigger](#trigger)
- [Custom Events](#custom-events)
  - [ready](#ready)
  - [mouseenter](#mouseenter)
  - [mouseleave](#mouseleave)
  - [pointerenter](#pointerenter)
  - [pointerleave](#pointerleave)
- [For Developers](#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](https://caniuse.com/es6-module).

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

### ESM CDN

```html
<script type="module">
  import { on, off } from "https://cdn.jsdelivr.net/npm/ivent@0.1/+esm";
</script>
```

### UMD

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

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


### UMD CDN

```html
<script src="https://cdn.jsdelivr.net/npm/ivent@0.1/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`):

```javascript
import { on, off } from 'ivent';
```

## Methods

### on
### one

DOM event listener:

```javascript
import { on } from 'ivent';

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

Event listener with delegated target:

```javascript
import { on } from 'ivent';

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

Custom event listener with namespace:

```javascript
import { on } from 'ivent';

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

### off

Remove DOM event listener:

```javascript
import { on } from 'ivent';

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

off(document, 'click');
```

Remove DOM event listener by namespace:

```javascript
import { on } from 'ivent';

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

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

### trigger

Trigger event:

```javascript
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:

```javascript
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:

```javascript
import { on } from 'ivent';

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

## For Developers

### Installation <!-- omit in toc -->

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

### Building <!-- omit in toc -->

* `npm run build` to run build

### Linting <!-- omit in toc -->

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

---
_Source: https://npm.io/package/ivent · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._