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