2015-09-06
253
Для того, чтобы скрипт реагировал на событие - нужно назначить хотя бы одну функцию-обработчик. Обычно обработчики называют "on+имя события", например:onclick.
Нужно сразу отметить, что JavaScript - однопоточный язык, поэтому обработчики всегда выпоняются последовательно и в общем потоке. Это значит, что при установке обработчиков двух событий, которые возникают на элементе одновременно, напримерmouseover (мышь появилась над элементом) и mousemove (мышь двигается над элементом), их обработчики будут выполнены последовательно.
Существует несколько способов назначать обработчик на конкретное событие элемента. Все они представлены ниже.
Через атрибут HTML-тега
Обработчик события можно указать в виде inline-записи, прямо в атрибуте onсобытие. Например, для обработки события click на кнопке input, можно назначить обработчик onclick вот так:
<input id="b1" value="Нажми Меня" onclick="alert('Спасибо!');" type="button" />
Можно назначить и функцию. Например, пусть при клике на кнопку input запускается функция count_rabbits(). Для этого запишем вызов функции в атрибут onclick:
<html>
<head>
<script type="text/javascript">
function count_rabbits() {
for(var i=1; i<=3; i++) {
// оператор + соединяет строки
alert("Из шляпы достали "+i+" кролика!")
}
}
</script>
</head>
<body>
<input type="button" onclick="count_rabbits()" value="Считать кролей!" />
</body>
</html>
Напомним, что имена атрибутов HTML-тегов нечувствительны к регистру, поэтому атрибут oNcLiCk сработает также, как onClick или onclick.
Но если вы хотите придерживаться хорошего стиля (или спецификации XHTML), то имена тегов и их атрибуты должны быть указаны в нижнем регистре.
Такой способ установки обработчиков очень удобен - он нагляден и прост, поэтому часто используется в решении простых задач. У этого способа установки обработчика есть и минусы. Как только обработчик начинает занимать больше одной строки - читабельность резко падает. Впрочем, сколько-нибудь сложные обработчики в HTML никто не пишет. Вместо этого лучше устанавливать обработчики из JavaScript способами, которые будут представлены ниже.
