Value-event NPM

value-event

Create DOM event handlers that write to listeners

Example (event)

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

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

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

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

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

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.

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

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
  }))