AddEventListener работает всегда, а DOM-свойство – нет

У специальных методов есть ещё одно преимущество перед DOM-свойствами. Есть некоторые события, которые нельзя назначить через DOM-свойство, но можно через addEventListener. Например, таково событие transitionend, то есть окончание CSS-анимации. В большинстве браузеров оно требует назначения через addEventListener.

Итого по назначению событий

Есть три способа назначения обработчиков событий:

1. Атрибут HTML: onclick="...".

2. Свойство: elem.onclick = function.

3. Специальный метод: elem.addEventListener(событие, handler[, phase]), удаление через removeEventListener.

Доступ к элементу через this

Внутри обработчика события, this ссылается на текущий элемент, то есть на тот, на котором он сработал. Это можно использовать, чтобы получить свойства или изменить элемент.

В коде ниже button выводит свое содержимое, используя this.innerHTML:

<button onclick="alert(this.innerHTML)">Нажми меня</button>

Объект события

Чтобы хорошо обработать событие, недостаточно знать о том, что это – «клик» или «нажатие клавиши». Могут понадобиться детали: координаты курсора, введённый символ и другие, в зависимости от события.

Детали произошедшего браузер записывает в «объект события», который передаётся первым аргументом в обработчик.

Свойства объекта события

Пример ниже демонстрирует использование объекта события:

<input type="button" value="Нажми меня" id="elem">

<script>

elem.onclick = function(event) {

alert(event.type + " на " + event.currentTarget); // вывести тип события и элемент

alert(event.clientX + ":" + event.clientY); // вывести координаты клика

}

</script>

Есть также и ряд других свойств, в зависимости от событий. Посмотреть весь перечень свойств объекта события можно написав следующий код:

<button id="btn">Кнопка</button>

<script>

let btn = document.getElementById('btn')

btn.onclick = function (event) {

console.log(event);

console.dir(event);

}

</script>

Объект события доступен и в HTML. При назначении обработчика в HTML, тоже можно использовать переменную event, это будет работать кросс-браузерно:

<input type="button" onclick="alert(event.type)" value="Тип события">

Это возможно потому, что когда браузер из атрибута создаёт функцию-обработчик, то она выглядит так: function(event) { alert(event.type) }. То есть, её первый аргумент называется "event".

Особенности IE8-

IE8- вместо передачи параметра обработчику создаёт глобальный объект window.event. Обработчик может обратиться к нему.

Работает это так:

elem.onclick = function() {

// window.event - объект события

alert(window.event.clientX);

};

Кроссбраузерное решение

Универсальное решение для получения объекта события:

element.onclick = function(event) {

event = event || window.event; // (*)

};

Строка (*), в случае, если функция не получила event (IE8-), использует window.event.-событие event.

Итого по объекту события

Объект события содержит ценную информацию о деталях события.

Он передается первым аргументом event в обработчик для всех браузеров, кроме IE8-, в которых используется глобальная переменная window.event.

Действия браузера по умолчанию

Многие события автоматически влекут за собой действие браузера, например:

· Клик по ссылке инициирует переход на новый URL.

· Нажатие на кнопку «отправить» в форме – отсылку ее на сервер.

· Двойной клик на тексте – инициирует его выделение.

Если мы обрабатываем событие в JavaScript, то зачастую такое действие браузера нам не нужно. К счастью, его можно отменить.

Отмена действия браузера

Есть два способа отменить действие браузера:

1. Для отмены действия браузера существует стандартный метод объекта события event.preventDefault().

2. Если же обработчик назначен через on событие, то можно просто вернуть false из обработчика.

В следующем примере при клике по ссылке переход не произойдет:

<a href="/" onclick="return false">Нажми здесь</a>

<a href="/" onclick="event.preventDefault()">здесь</a>

Другие действия браузера

Действий браузера по умолчанию достаточно много.

Вот некоторые примеры событий, которые вызывают действие браузера:

· mousedown – нажатие кнопкой мыши в то время как курсор находится на тексте начинает его выделение.

· click на <input type="checkbox"> – ставит или убирает галочку.

· submit – при нажатии на <input type="submit"> в форме данные отправляются на сервер.

· wheel – движение колёсика мыши инициирует прокрутку.

· keydown – при нажатии клавиши в поле ввода появляется символ.

· contextmenu – при правом клике показывается контекстное меню браузера.

Все эти действия можно отменить, если мы хотим обработать событие исключительно при помощи JS.

Особенности IE8-

В IE8- для отмены действия по умолчанию нужно назначить свойство event.returnValue = false.

Кроссбраузерный код для отмены действия по умолчанию:

element.onclick = function(event) {

event = event || window.event;

event.preventDefault? event.preventDefault(): (event.returnValue=false);