События и обратные вызовы

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

События происходят при загрузке страницы, при взаимодействии пользователя (клики, наведение курсора мыши, изменения) и множество других раз, и их также можно запускаться вручную.

Чтобы отреагировать на событие, вы просматриваете его и предоставляете функцию, которая будет вызвана браузером при возникновении события. Эта функция известна как обратный вызов.

Вот группа вещей, необходимых для прослушивания события; функция обратного вызова, элемент и вызов для прослушивания события:

var handleClick = function (event) {
    // do something!
};
var button = document.querySelector('#big-button');
button.addEventListener('click', handleClick);

addEventListener ─ это метод, который можно найти во всех элементах DOM. Здесь он вызывается для элемента, сохранёенного в переменной button.

Первым аргументом является строка ─ название события, которое нужно прослушать. Вот оно: click ─ это щелчок мыши или касание пальца. Вторая ─ это функция обратного вызова ─ вот она: handleClick.

К сожалению, Internet Explorer не поддерживается addEventListener в версиях более ранних, чем 9. Вместо этого attachEvent необходимо использовать.

button.attachEvent('onclick', handleClick);

Обратите внимание, что для этого требуется onclick, а не просто click. Вы обнаружите, что это одно и то же для большинства событий. Подобные вещи привели к созданию библиотек, подобных jQuery (к которым мы ещё вернёмся) ─ они помогают вам не беспокоиться о том, что способ прослушивания событий в разных браузерах разный.

Данные о конкретном событии передаются в обратный вызов события. Взгляните на handleClick, объявленный выше. Вы можете увидеть его аргумент: событие ─ это объект, свойства которого описывают произошедшее.

Вот пример события, которое вы могли бы увидеть в обратном вызове события click, например handleClick. Существует множество свойств, дающих вам представление о том, где на странице произошло событие (например, pageX и offsetY) ─ они немного отличаются, поскольку зависят от контрольной точки, используемой для измерения. Вы также можете увидеть target, который является ссылкой на узел, по которому кликнули.

{
    offsetX: 74,
    offsetY: 10,
    pageX: 154,
    pageY: 576,
    screenX: 154,
    screenY: 489,
    target: h2,
    timeStamp: 1363131952985,
    type: "click",
    x: 154,
    y: 395
}

Страницы в тему:

  • Следующая страница: AJAX
  • Предыдущая страница: DOM

Добавить комментарий