Все эти методы возвращают elem.

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

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

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

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

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

<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);