Javascript e which values

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

Объект Event описывает событие, произошедшее на странице. Одной из причин возникновения событий являются действия пользователя, такие как клики мышкой Mouse Event или ввод с клавиатуры Keyboard Event . Существует множество различных событий с разным набором информации.

Обратите внимание на обзорную статью о событиях. В ней описываются примеры работы с событиями.

Пример

Скопировать ссылку «Пример» Скопировано

Самый простой и широко распространённый способ использования событий — это отслеживание срабатывания кликов по каким-либо элементам на странице.

При подписке на событие мы передаём обработчик, который будет вызван при каждом срабатывании события в браузере. В случае, когда происходит событие типа click , обработчик будет вызван с событием Mouse Event :

 element.addEventListener('click', function (event)  console.log(event)>) element.addEventListener('click', function (event)  console.log(event) >)    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

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

Свойства

Скопировать ссылку «Свойства» Скопировано

• bubbles — является ли данное событие всплывающим.
• cancelable — является ли событие отменяемым.
• current Target — указывает на элемент, на котором установлен обработчик события.
• default Prevented — отменено ли поведение события по умолчанию.
• event Phase — указывает на фазу срабатывания события.
• is Trusted — указывает на происхождение события, будет в значении true , если событие инициировано действиями пользователя. false — если событие инициировано из кода с помощью dispatch Event ( ) .
• target — ссылка на объект, которым было инициировано событие. Например, если событие произошло на поле ввода, мы получим ссылку на этот DOM элемент.
• time Stamp — время возникновения события в миллисекундах.
• type — тип события.

Методы

Скопировать ссылку «Методы» Скопировано

• composed Path ( ) — вернёт массив элементов, на которых сработает событие.
• prevent Default ( ) — предотвращает дефолтное поведение события. Если вызвать этот метод на событии клика по ссылке, то переход по ссылке не произойдёт, но событие продолжит всплытие.
• stop Propagation ( ) — предотвращает всплытие события.
• stop Immediate Propagation ( ) — делает то же самое, что и stop Propagation , но в том числе предотвращает вызов обработчиков события, которые были установлены на этом же элементе.

Обработчики событий, установленные на элемент, вызываются по порядку их установки.

Как понять

Скопировать ссылку «Как понять» Скопировано

Работа JavaScript основана на событийной модели — это значит, что для того, чтобы запустить какой-либо код, должно произойти событие. Даже код, который был написан в файле и не привязан к какому-либо событию, будет обработан после того, как произойдёт событие, которое сообщит браузеру, что код был загружен.

Событие может быть создано по следующим причинам:

Примеры

Скопировать ссылку «Примеры» Скопировано

Системное событие

Скопировать ссылку «Системное событие» Скопировано

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

Мы можем отслеживать состояние интернет-соединения и показывать сообщение, если оно пропало.

 window.addEventListener('offline', function()  alert('Отсутствует подключение к интернету')>) window.addEventListener('offline', function()  alert('Отсутствует подключение к интернету') >)    Скопировать Скопировано Не удалось скопировать   

Программное событие

Скопировать ссылку «Программное событие» Скопировано

Событие может быть создано с помощью кода, поле is Trusted в таком событии будет содержать значение false , а значит, мы будем знать, что событие было вызвано не системно и не пользователем.

Создадим своё событие и вызовем его на window :

 const myEvent = new CustomEvent('my-event',  detail:  spicy: 123, >,>) window.addEventListener('my-event', function(evt)  console.log('В поле spicy:', evt.detail.spicy)>) window.dispatchEvent(myEvent) const myEvent = new CustomEvent('my-event',  detail:  spicy: 123, >, >) window.addEventListener('my-event', function(evt)  console.log('В поле spicy:', evt.detail.spicy) >) window.dispatchEvent(myEvent)    Скопировать Скопировано Не удалось скопировать   

На практике

Скопировать ссылку «На практике» Скопировано

Павел Минеев советует

Скопировать ссылку «Павел Минеев советует» Скопировано

🛠 В событии есть два похожих поля: target и current Target . Их отличие легко увидеть на примере.

   Моя кнопочка  button class="button" type="button"> span>Моя кнопочкаspan> button>    Скопировать Скопировано Не удалось скопировать   

 document.querySelector('.button').addEventListener('click', function (event)  console.log('Событие инициировано на', event.target) console.log('Событие поймано на', event.currentTarget)>) document.querySelector('.button').addEventListener('click', function (event)  console.log('Событие инициировано на', event.target) console.log('Событие поймано на', event.currentTarget) >)    Скопировать Скопировано Не удалось скопировать   

current Target всегда будет элементом, к которому привязан обработчик, то есть элементом, на котором вызывался add Event Listener ( ) .

target — это элемент, на котором произошло событие. Оно может не совпадать с current Target , потому что большинство событий всплывают.

Источник

Объект события «e» в javascript

Часто в коде javascript встречается переменная «e» или «event». Это целый объект, который содержит много полезной информации о происходящем событии. Уметь применять его в нужных местах должен каждый веб-разработчик, поэтому приступим к его изучению прямо сейчас.

Когда происходит какое-то действие (клик мыши, нажатие клавиши), браузер создает объект события. Изначально в javascript-функциях было принято обозначать его как «event», но из-за частого использования стало принято писать только первую букву «e».

Из объекта можно получить информацию о том, на каком элементе было совершено действие, координаты курсора в этот момент, тип события, нажатые клавиши и другое. Чтобы получить к нему доступ достаточно привязать его к переменной. Сделать это просто — задаём первым параметром в функции-обработчике любую переменную (принято e).

document.getElementById(‘menu’).onclick = function(e)

• «type» — возвращает тип произошедшего события, например при клике мыши «click»;
• «clientX» и «clientY» — координаты кусора при возникновении события;
• «which» — содержит информацию о нажатых клавишах;
• «target» — триггер, позволяющий получить доступ к элементу, над которым произошло событие.

Переменная «e» как способ получения елемента на котором произошло событие

А теперь рассмотрим триггер «target», который даёт возможность через объект «e» получить доступ к элементу на котором произошло событие. И тут многие могут задать вопрос — чем плох для этого «this» . Отвечаю — в javascript «this» ссылается на элемент, на который повешен обработчик события, а «e» на элемент — над которым оно произошло. Это разные вещи и чтобы понять отличие необходимо знать что при возникновении события оно передается от потомка к родителю пока не достигнет самого верхнего родителя — «document».

Рассмотрим пример в котором повесили обработчик на синий блок. Попробуйте нажать на него, а затем на красный и зелёный блок. Таким образом поймете разницу.

document.getElementById(‘div-2’).onclick = function(e)

С помощью триггера «e.target» мы получаем доступ к элементу на котором произошло событие. Можем получать любые аттрибуты (getAttribute()) или узнать имя тега (tagName).

Небольшая фишка с использованием e.target в javascript

Какое-бы событие не произошло, оно обязательно достингнет верхнего родителя (исключение описано ниже), которым является «document». Получается, что если повесить на «document» обработчик нажатия мыши, то можно отлавливать в нём клик на каком бы элементе он не произошел, а с помощью «e.target» определять конкретный элемент по которому кликнули.

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

document.onclick = function(e)

Одна строчка кода и задача решена. Представьте как это сложно сделать другими способами.

Запрет на стандартное действие браузера и всплытие события

Для некоторых тегов браузер создает свои обработчики событий. Например, при клике по ссылке осуществляется переход по адресу, указанному в аттрибуте «href», при нажатии на кнопку с типом «submit» происходит отправка формы, а при двойном щелчке на поле с текстом — он выделяется. Все эти действия по умолчанию заложены в браузер, но несмотря на это, ими можно манипулировать.

В javascript для отмены стандартного действия браузера используется метод «preventDefault()», который можно применить к объекту события «e». Например, чтобы запретить переход по всем ссылкам достаточно немного переделать предыдущий код.

document.onclick = function(e)

Запрет на всплытие события

В предыдущих примерах мы основывали решение на эффекте всплывания события, но в некоторых случаях оно может не дойти до «document». Произойти это может если на его пути встанет обработчик с запретом дальнейшего всплытия.

document.getElementById(‘link’).onclick = function(e)

Если создать ссылку с идентификатором «link» и обработчиком, где есть запрет на всплытие, то при клике на неё будет осуществлен переход на новую страницу независимо от того, запрещен ли он в обработчиках у родителей этой ссылки.

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

Чтобы запретить всплытие и стандартное действие браузера можно конечно воспользоваться одновременным вызовом вышепредставленных методов объекта «e», но в большинстве случаев в javascript просто возвращают в обработчике значение «false».

Заключение

В качестве заключения хочу предупредить, что здесь рассмотрены не все возможности объекта e в javascript. Например, я полностью опустил кроссбраузерность в примерах, а ведь для использования в Internet Explorer необходимо в начале обработчика прописывать следующий код:

var elem, evt=e?e:event; elem = (evt.target)?evt.target:evt.srcElement;

Так же я ничего не написал про способ получения нажатых клавиш, а ведь вся эта информация так же содержится в рассматриваемом объекте. Постараюсь восполнить эти пробелы в следующих статьях.

Источник