В браузере большая часть кода управляется событиями, и написание интерактивных приложений на 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 }
Страницы в тему: