Добавляем...


Привязка событий в JavaScript
Конечно, можно привязать обработчики событий к частям документа с помощью атрибутов событий (X)HTML, но иногда удобнее использовать средства JavaScript, особенно в тех случаях, когда требуется динамическое добавление или удаление обработчиков событий. Кроме того, такой подход углубляет разделение между структурой документа, его логикой и представлением.
Для решения указанной задачи средствами JavaScript важно понять, что программы обработки событий доступны в виде методов объектов, к которым они привязаны. Например, чтобы установить обработчик событий click для кнопки формы, следует назначить свойству onclick соответствующий программный код:

<form action="#" method="get" name="myForm" id="myForm">
<input name="myButton" id="myButton" type="button" value="Кликни на меня" />
</form>
<script type="text/javascript">
<!--
document.myForm.myButton.onclick = new Function("alert('Спасибо за клик! ')");
// -->
</script>

Конечно, при установке программы обработчика события не обязательно использовать анонимные функции. Например, ниже обработчику событий mouseover назначается уже существующая функция:

<script type="text/javascript">
<!--
function showMessage()
{
alert("Навели !");
}
// -->
</script>
<form action="#" method="get" name="myForm" id="myForm">
<button id="myButton">Наведите на меня!</button>
<script type="text/javascript">
<!--
document.getElementById("myButton").onmouseover = showMessage;
// -->
</script>

Независимо от того, как определяется подходящая функция, программу обработки события необходимо зарегистрировать после того, как будет добавлен объект DOM, соответствующий элементу HTML. Иначе при попытке установить свойство (обработчик событий) несуществующего объекта будет сгенерирована ошибка выполнения. Чтобы этого не допустить, можно назначать обработчики событий только после вызова обработчика события onload документа. Другим вариантом является размещение сценария с определением обработчика событий после соответствующего элемента.


добавить комментарий
(без перезагрузки и регистрации)


10 случайных разделов

Что ищем на сайте ?


Примеры кода на сайте







@ 2008-2011 Amber
При использовании материалов ссылка на сайт обязательна
Яндекс.Метрика