Клиентский JavaScript 1.3 Руководство



Определение обработчика события


Вы определяете обработчик события (функцию или серию операторов JavaScript) для обработки события. Если событие применяется к HTML-тэгу (то есть событие применяется к JavaScript-объекту, созданному из этого тэга), то Вы можете определить для него обработчик события. Имя обработчика это имя события с префиксом "on." Например, обработчик для события focus называется onFocus.

Для создания обработчика события для тэга HTML добавьте атрибут обработчика события в этот тэг. Поместите код JavaScript в кавычки как значение атрибута. Общий синтаксис таков:

<TAG eventHandler="JavaScript Code">

где TAG это тэг HTML, eventHandler это имя обработчика события, а JavaScript Code это последовательность операторов JavaScript.

Например, Вы создали JavaScript-функцию compute. Вы выполняете вызов Navigator'ом этой функции, когда пользователь щёлкает кнопку, назначив вызов функции обработчику onClick кнопки:

<INPUT TYPE="button" VALUE="Calculate" onClick="compute(this.form)">

Вы можете указать любые операторы JavaScript в качестве значения атрибута onClick. Эти операторы выполняются, если пользователь щёлкает по кнопке. При включении нескольких операторов разделяйте их символом (;).

В предыдущем примере this.form ссылается на текущую форму. Ключевое слово this ссылается на текущий объект, которым в данном случае является кнопка. Конструкция this.form, следовательно, ссылается на форму, содержащую кнопку. Обработчик onClick это вызов функции compute с текущей формой в качестве аргумента.

Если Вы создаёте обработчик события, соответствующий объект JavaScript получает свойство с именем обработчика события. Это свойство даёт Вам доступ к обработчику события данного объекта. Например, в предыдущем примере JavaScript создаёт объект Button со свойством onclick, значением которого является "compute(this.form)".

Не забывайте чередовать двойные и одинарные кавычки. Поскольку обработчик события в HTML обязан быть заключён в кавычки, Вы обязаны использовать одинарные кавычки как ограничители строковых аргументов. Например:

<INPUT TYPE="button" NAME="Button1" VALUE="Open Sesame!"
onClick="window.open('mydoc.html', 'newWin')">

Вообще хорошей практикой может стать определение функции для обработчика события вместо использования нескольких операторов JavaScript:

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

  • это сделает Ваш код более понятным.



  • Содержание  Назад  Вперед