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

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

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

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

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

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

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

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

}

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

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

1. Это именно свойство, а не атрибут.

Кроме того, как и все свойства объектов 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;