Forms - Introducing HTML5 - page 88

The “whenever anything
changes” event
One almost insignifi cant change to the <form> element is a new
event called oninputchange . In fact, this a useful event that fi res
on the form element when any of the form fi elds within the form
change. This saves you having to attach lots of onchange han-
dlers to each form control.
For instance, if I were to create a colour picker that gives me both
RGBA and HSLA, typically I would have to hook event listeners
to each of the value sliders, but by using the oninputchange event,
I'm able to hook a single event listener to the form and recalcu-
late my RGBA and HSLA values using a single method.
The result, whether I'm attaching lots of event listeners or just a
single one, is very similar. However, this feels a lot cleaner and
better designed, as there's no duplication of event hooking.
When a slider is changed, it will generate the RGBA and HSLA
and update the preview colour. The code listing below is just
the JavaScript required:
form.onforminput = function () {
var i = this.length, values = [], value = 0;
while (i--, value = this[i].value) {
if (this[i].type == 'range') {
switch (this[i].name) {
// alpha_channel is between 0-1
case 'alpha_channel': values.push(value / 100);
¬ break;
// hue is a plain value from 0-360
case 'hue': values.push(value); break;
// default includes saturation & luminance as a
¬ percentage
default: values.push(value + '%');
}
}
}
hsla.value = 'hsla(' + values.reverse().join(', ') + ')';
preview.style.backgroundColor = hsla.value;
rgba.value = getComputedStyle(preview, null).
¬ backgroundColor;
};