СОБЫТИЕ «ВСЯКИЙ РАЗ, КОГДА ЧТО-ТО МЕНЯЕТСЯ»

Формы  •  125
ПРИМЕЧАНИЕ
В первом издании этой книги мы говорили о 
onforminput, но с тех пор этот обработчик событий 
впал в немилость  Однако не пугайтесь, все сказанное в этом разделе все так же имеет силу, так 
как очень похожий обработчик событий 
oninput входит в спецификацию HTML5 и его можно 
применять почти так же, как 
onforminput 
Например, если бы мне нужно было создать поле выбора цвета одновременно в модели 
RGBA и HSLA, мне бы, скорее всего, пришлось добавить приемник событий к каждому 
ползунку. Но с помощью события 
oninputchange
 я могу добавить один обработчик со-
бытий к форме и пересчитать значения RGBA и HSLA одним методом.
Результат использования одного или нескольких обработчиков событий будет выглядеть 
почти одинаково. Однако вариант без дублирования обработчиков событий выглядит 
лучше и аккуратнее.
При передвижении ползунка будут сгенерированы значения RGBA и HSLA, и образец цвета 
будет обновлен. Ниже приведен JavaScript-код, который для этого потребуется.
form.oninput = 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 может быть от 0 до1
                case 'alpha_channel': values.push(value / 100);
                ¬ break;
                // hue — это простое значение от 0 до 360
                case 'hue': values.push(value); break;
                // default включает процентные значения насыщенности
                ¬ и яркости
                default: values.push(value + '%');
            }
        }
    }
    hsla.value = 'hsla(' + values.reverse().join(', ') + ')';
    preview.style.backgroundColor = hsla.value;
    rgba.value = getComputedStyle(preview, null).
¬ backgroundColor;
};
В итоге мое поле выбора цвета использует тип ввода данных 
range
, новое событие 
oninput
 
и новые элементы вывода для отображения значения (хотя это можно было сделать с по-
мощью 
.innerHTML
). Результат показан на рис. 3.14.
Относительно события 
oninput
 особенно важно отметить, что, в отличие от 
onchange
, 
которое срабатывает, только когда элемент заполнен (хотя исторически некоторые браузеры 
понимали это неправильно и заставляли событие срабатывать во время ввода — удиви-
тельно, но в этом списке нет IE!), 
oninput
 срабатывает, пока пользователь вводит данные 
в форму, то есть непосредственно в то время, пока изменения вносятся.

жүктеу/скачать 5,47 Mb.

Достарыңызбен бөлісу: