# value-event

> Create DOM event handlers that write to sinks

Latest version **5.1.1** (published 2016-05-15) · 0 weekly downloads

## Install

```sh
npm install value-event
pnpm add value-event
yarn add value-event
bun add value-event
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.1.1 |
| Published | 2016-05-15 |
| First published | 2014-03-31 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 22 |
| Author | Raynos |
| Maintainers | raynos |

## Links

- npm: https://www.npmjs.com/package/value-event
- Repository: https://github.com/Raynos/value-event
- Issues: https://github.com/Raynos/value-event/issues
- npm.io page: https://npm.io/package/value-event

## Dependencies (5)

- [xtend](https://npm.io/package/xtend.md) ^2.2.0
- [global](https://npm.io/package/global.md) ^4.2.1
- [dom-walk](https://npm.io/package/dom-walk.md) ^0.1.0
- [dom-delegator](https://npm.io/package/dom-delegator.md) ^13.0.1
- [form-data-set](https://npm.io/package/form-data-set.md) ^2.0.0

## Recent versions

- 5.1.1 (latest) — 2016-05-15
- 5.1.0 — 2015-03-04
- 5.0.0 — 2015-02-05
- 4.3.1 — 2015-02-03
- 4.3.0 — 2015-02-03
- 4.2.0 — 2014-12-13
- 4.1.0 — 2014-12-03
- 4.0.0 — 2014-11-24
- 3.2.0 — 2014-09-29
- 3.1.1 — 2014-09-26
- 3.1.0 — 2014-09-26
- 3.0.0 — 2014-09-18
- 2.3.0 — 2014-08-31
- 2.2.1 — 2014-07-28
- 2.2.0 — 2014-07-24
- … 22 more at https://npm.io/package/value-event/versions

## README

# value-event

<!--
    [![build status][1]][2]
    [![NPM version][3]][4]
    [![Coverage Status][5]][6]
    [![gemnasium Dependency Status][7]][8]
    [![Davis Dependency status][9]][10]
-->

<!-- [![browser support][11]][12] -->

Create DOM event handlers that write to listeners

## Example (event)

```html
<div id='foo'>
  <div class='name'>Bob Steve</div>
  <input class='name' value='Bob Steve'></input>
</div>
```

```js
var event = require('value-event/event')
var listener = function (data) {
  console.log('data', data)
}

var elem = document.getElementById('foo')
elem.querySelector('div.name')
  .addEventListener('click', event(listener, {
    clicked: true
  }))
elem.querySelector('input.name')
  .addEventListener('keypress', event(listener, {
    changed: true
  }))
```

## Example (change)

The change event happens when form elements change

For example:

 - someone types a character in an input field
 - someone checks or unchecks a checkbox

```html
<div id='my-app'>
  <input name='foo' value='bar' />
</div>
```

```js
var changeEvent = require('value-event/change')
var listener = function (data) {
  console.log('data', data.changed, data.foo)
}

var elem = document.getElementById('my-app')
elem
  .addEventListener('input', changeEvent(listener, {
    changed: true
  }))
```

## Example (submit)

The submit event happens when form elements get submitted.

For example:

 - a button gets clicked
 - someone hits ENTER in an input field

```html
<div id='my-app'>
  <input name='foo' value='bar' />
</div>
```

```js
var submitEvent = require('value-event/submit')
var listener = function (data) {
  console.log('data', data.changed, data.foo)
}

var elem = document.getElementById('my-app')
elem
  .addEventListener('keypress', submitEvent(listener, {
    changed: true
  }))
```

## Example (value)

The value event happens whenever the event listener fires.
It attaches input values just like `'submit'` and `'change'`
except it doesn't have special semantics of what's a valid
event.

```html
<div id='my-app'>
  <input name='foo' value='bar' />
</div>
```

```js
var valueEvent = require('value-event/value')
var listener = function (data) {
  // currentValues is { 'foo': 'bar' }
  console.log('data', data.changed, data.foo)
}

var elem = document.getElementById('my-app')
elem.querySelector('input.name')
  .addEventListener('blur', valueEvent(listener, {
    changed: true
  }))
```

## Installation

`npm install value-event`

## Contributors

 - Raynos

## MIT Licenced

  [1]: https://secure.travis-ci.org/Raynos/value-event.png
  [2]: https://travis-ci.org/Raynos/value-event
  [3]: https://badge.fury.io/js/value-event.png
  [4]: https://badge.fury.io/js/value-event
  [5]: https://coveralls.io/repos/Raynos/value-event/badge.png
  [6]: https://coveralls.io/r/Raynos/value-event
  [7]: https://gemnasium.com/Raynos/value-event.png
  [8]: https://gemnasium.com/Raynos/value-event
  [9]: https://david-dm.org/Raynos/value-event.png
  [10]: https://david-dm.org/Raynos/value-event
  [11]: https://ci.testling.com/Raynos/value-event.png
  [12]: https://ci.testling.com/Raynos/value-event

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