JavaScript

Search for '{{search_term}}'

Обработка пользовательских событий в JavaScript

CMOS is the Code-Maven Open Source podcast that also includes video interviews. Subscribe to this feed RSS feed with your Podcast listener app or via iTunes iTunes.

В прошлой статье мы видели, как менять 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!

Savenkova Natalya
Переводчик
Savenkova Natalya
Gabor Szabo
Автор
Gabor Szabo

Comments