Самый близкий родственник описанного выше способа - установка функции-обработчика через свойство 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;