В прошлой статье мы видели, как менять DOM и обновлять HTML страницу, но когда мы должны это делать? В предыдущем примере код, обновляющий HTML, запускался сразу же, как только страница загружалась в браузер.

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

В Javascript мы можем присоединить (повесить) различные "event listeners" (обработчик события), к любому элементу DOM, и даже указать, на какое точно событие он должен реагировать.

Для этого мы можем использовать метод addEventListener элемента DOM, который получит два параметра. Первый - это имя события, такое как click или keyup, или change. Второй - функция. (Возможно, мне бы стоило объяснить, как вы можете передать функцию как параметр в другую функцию.)

Вот полное выражение:

document.getElementById('btn').addEventListener('click', clicked);

Это значит что, как только браузер обнаруживает событие 'click' на HTML элементе с id 'btn', он будет выполнять функцию 'clicked'.

Что делает функция 'clicked'?

Она меняет DOM (HTML), вставляя текст 'Hello World' в элемент с id 'display'. Эта операция была рассмотрена в статье про изменение DOM.

Попробуйте пример, нажав на ссылку Try.

examples/js/event_listener.html

<button id="btn">Click me</button>

<div id="display"></div>

<script>
function clicked() {
    document.getElementById('display').innerHTML = 'Hello World';
}

document.getElementById('btn').addEventListener('click', clicked);

</script>
Try!