JarCastingvalue-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
}))
Installation
npm install value-event
Contributors
- Raynos