Когда использовать

Такой способ установки обработчиков очень удобен - он нагляден и прост, поэтому часто используется в решении простых задач.

У этого способа установки обработчика есть и минусы. Как только обработчик начинает занимать больше одной строки - читабельность резко падает.

Впрочем, сколько-нибудь сложные обработчики в HTML никто не пишет. Вместо этого лучше устанавливать обработчики из JavaScript способами, которые будут представлены ниже.

• Просто для простых задач

• Смесь javascript-кода и HTML-разметки

• Сложные обработчики писать сложно или невозможно

Через свойство объекта

Самый близкий родственник описанного выше способа - установка функции-обработчика через свойство onсобытие соответствующего элемента. Этот способ тоже будет работать в любом браузере с поддержкой JavaScript.

Для этого нужно:

1. получить элемент

2. назначить обработчик свойству on+имя

Вот пример установки обработчика события click на элемент с

id="myElement": document.getElementById('myElement').onclick = function() {alert('Спасибо')}

<input id="myElement" type="button" value="Нажми меня"/>

Этот код в действии:

Стоит сразу обратить внимание на две детали:

1. Это именно свойство, а не атрибут. Поэтому, хотя технически и есть кроссбраузерные способы назначать обработчики через setAttribute, но лучше их даже не знать, а пользоваться прямым присвоением.

Кроме того, как и все свойства объектов JavaScript, имя свойства onсобытие чувствительно к регистру символов и должно быть в нижнем регистре.

2. Обработчик - не текст, а именно функция javascript.

Когда браузер видит свойство on... в HTML-разметке - он создает функцию из содержимого кавычек. В этом смысле эти два кода работают одинаково:

1. Только HTML:

<input type="button" onclick=" alert('Клик!') "/>

2. HTML + JS:

<input type="button" id="button"/>

document.getElementById('button').onclick = function() {

alert('Клик')

}

Все вызовы типа getElementById должны запускаться после описания соответствующего HTML-узла, а лучше - после окончания загрузки страницы.

Иначе узел просто не будет найден.

Конечно, можно и не создавать анонимную функцию, а использовать любую уже готовую:

function doSomething() {

alert('Спасибо')

}

. . . . . .

document.getElementById('button').onclick = doSomething

Частая ошибка новичков

Обратите внимание - свойству присваивается именно сама функция-обработчик doSomething,

а не

doSomething():

document.getElementById('button').onclick = doSomething

doSomething() - это результат запуска функции, а так как вызоваreturn в ее коде нет, то этот результат будет undefined.

Сравните это с атрибутом. Там - наоборот, скобки нужны:

<input type="button" id="mybutton" onclick="doSomething()"/>

Это различие легко объяснить. Дело в том, что при назначенииonclick в HTML браузер автоматически создает функцию-обработчик из содержимого кавычек. Получается, что последний пример - это по сути то же самое, что:

document.getElementById('mybutton').onclick = function() {

doSomething() // внутри автосозданной функции

}