.
Web-программирование: «Java Script(JS): Объект event.
Автор megabax   
01.08.2013 г.
Урок 13. Управление шрифтами в CSS New Page 1

Web-программирование: «Java Script(JS): Объект event.

 

Для углубленного изучения web-программирования (язык PHP и написание своей собственной CMS) советую подписаться на платный раздел (см. анонсы раздела "Пишем Easy CMS").

 

Сегодня мы изучим объект event. Этот объект содержит в себе информацию о событии. В разных браузерах к объекту event обращаются по разному: либо как к полю evetn объекта windows, либо к аргументу функции обработчика события, который передан как event. Для того, что бы программа была кроссбраузерная, к этому этому объекту обращаются так:

 

evt = (e) ? e : event

 

В качестве иллюстрации рассмотрим пример автоматического фокуса на следующее поле ввода при заполнении регистрационного кода, цифры в котором сгруппированы по 4 цифры:

 

Тема сегодняшнего выпуска: «Java Script(JS): Объект event.

 

А вот исходный код этого примера:

<html>

 

<head>

    <title>Урок 92. Java Script (JS): Объект event</title>

</head>

 

 

 

<body OnLoad="onLoagPage()">

    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">

        function autofocus(next, e) {

            evt = (e) ? e : event //в зависимости от типа браузера происходить по разному обращение к event

            var item = (evt.target) ? evt.target : evt.srcElement

            var key = evt.keyCode

            var limit = item.maxLength

            if(key>31 && item.value.length==limit) {

                item.form.elements[next].focus()

            }

        }

    </SCRIPT>

    <form>Введите регистрационный код:

        <input type="text" name="code1" size="5" maxlength="4" onKeyUp="autofocus('code2',event)">   

        <input type="text" name="code2" size="5" maxlength="4" onKeyUp="autofocus('code3',event)">   

        <input type="text" name="code3" size="5" maxlength="4" onKeyUp="autofocus('code4',event)">   

        <input type="text" name="code4" size="5" maxlength="4" onKeyUp="autofocus('code1',event)">   

    </form>

</body>

 

</html>

 

В этом примере так же происходит проверка, что бы при нажатии функциональных клавиш (клавиш управления курсором) переход на следующее поле не происходило, если текущее не заполнено.