Рубрики
Без рубрики

События браузера объяснены на простом английском

Каковы события браузера? Событие относится к действию или возникновению, которое происходит в системе, которую вы программируете. Затем система уведомляет вас о событии, чтобы вы могли ответить на него в случае необходимости. В этой статье я сосредоточу на событиях в

Автор оригинала: FreeCodeCamp Community Member.

Каковы события браузера?

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

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

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

Точно так же в веб-разработке мы можем предпринять действие всякий раз, когда у нас есть интерес, имеет место.

Некоторые из общих мероприятий, которые вы могли столкнуться с веб-разработкой, включают в себя:

  1. События мыши
  • щелчок
  • dblclick.
  • MouseMove.
  • мыши
  • колесико мыши
  • мышек
  • контекстное меню
  • Mousedown.
  • мышцы

2. Коснитесь событий

  • трогать
  • прикосновение
  • агрессивно
  • Touchcancel.

3. События клавиатуры

  • клавиша
  • нажатие клавиши
  • keyup.

4. Форма событий

  • сосредоточиться
  • размытие
  • менять
  • представить

5. Оконные события

  • прокручивать
  • изменить размер
  • hashchange.
  • нагрузка
  • разгружать

Для полного списка событий и различных категорий они попадают, вы можете проверить Документация MDN Отказ Некоторые из перечисленных событий являются стандартными событиями в официальных спецификациях, в то время как другие являются событиями, используемыми внутри конкретных браузеров.

Что такое обработчики событий?

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

Это действие часто принимается в функциях под названием Обработчики событий которые также называются Слушатели событий Отказ Если происходит событие, и обработчик событий вызывается, мы говорим, что событие было зарегистрировано. Это проиллюстрировано в коде ниже.

Если кнопка с ID BTN Нажат, обработчик событий вызывается, и нажал оповещение с кнопкой текста «». OnClick Свойство было назначено на функцию, которая является обработчиком событий. Это один из трех способов добавления обработчика событий в элемент DOM.

const button = document.getElementById("btn");
button.onclick = function(){
   alert("Button has been clicked");
}

Стоит отметить, что Обработчики событий в основном объявляются как функции, но они также могут быть объектами.

Как назначить обработчики событий

Существуют несколько способов прикрепления обработчиков событий к элементам HTML. Мы обсудим эти методы вместе со своими плюсами и минусами, ниже.

Назначьте обработчик событий с атрибутом HTML

Это самый простой способ подключения обработчика события к элементам HTML, хотя это наименее рекомендуется. Он включает в себя использование атрибута INLINE HTML-события с именем на <событие> Чья ценность является обработчиком событий. Например OnClick , Onchange , OnsUbmit и так далее.

Обратите внимание, что нередко найти атрибуты событий HTML с именем OnClick , Onchange или OnsUbmit Поскольку атрибуты HTML не чувствительны к регистру. По сути, это синтаксически правильно для использования OnClick , OnClick или OnClick Отказ Но обычная практика оставить его в нижнем регистре.

В приведенном выше примере код JavaScript был буквально назначен атрибуту события HTML.

Примите к сведению немедленно, вызываемое формат функции (IIFE) в последние два кнопка элементы. Хотя это выглядит простым и простым, присвоение атрибута INLINE HTML-атрибута неэффективна и сложно поддерживать.

Предположим, у вас есть более 20 таких кнопок в вашей разметке. Было бы повторяется, чтобы написать тот же код JavaScript для каждой кнопки. В своем собственном файле всегда лучше писать JavaScript, чтобы вы могли легко использовать тот же код для нескольких файлов HTML.

Кроме того, вы не можете иметь несколько строк встроенного кода JavaScript INLINE. INLINE JavaScript код считается анти-образностью из-за вышеупомянутых причин. Так что старайтесь избегать этого, если вы не пытаетесь что-то быстрое.

Объявите обработчик событий в теге скрипта

Вместо того, чтобы сделать вышеизложенное, вы также можете объявить обработчик событий в Сценарий тег и вызов его встроенной, как показано ниже.

Обратите внимание, что просто назначение имени функции в качестве значения атрибута HTML-мероприятия, таких как OnClick не будет работать. Вам необходимо вызовить его, как показано выше, охватывает вызов в цитатах, точно так же, как значение любого атрибута HTML.

Назначьте обработчик событий с помощью свойства DOM

Вместо использования встроенного атрибута событий HTML, проиллюстрированного выше, вы также можете назначить обработчик события как значение свойства события на элементе DOM. Это возможно только внутри Сценарий Тег или в файле JavaScript.

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

const button = document.getElementById("btn");
button.onclick = function(){
   alert("Button has been clicked");
}
// Only this is applied
button.onclick = function(){
   console.log("Button has been clicked");
}

Если вы хотите удалить событие слушателя из OnClick Событие, вы можете просто повторно назначить button.onclick к null Отказ

button.onclick = null

Как улучшить метод DOM добавления слушателей событий

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

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

Чтобы исправить это ограничение, addeventListener и RemoveeventListener были введены. Это позволяет добавлять несколько обработчиков событий для одного и того же события на одном элементе.

const button = document.getElementById('btn');
button.addEventListener('click', () => {
  alert('Hello World');
})
button.addEventListener('click', () => {
  console.log('Hello World');
})

В коде выше, элемент с ID BTN выбран, а затем отслеживается для Нажмите событие, прикрепление двух обработчиков событий. Первый обработчик событий будет вызван и сообщение о предупреждении Здравствуйте, мир всплывает. Впоследствии Здравствуйте, мир Также будет зарегистрировано в консоли.

Как вы могли бы заметить из приведенных выше примеров, подпись функции element.addeventListener является:

element.addEventListener(event, eventHandler, [optional parameter])

Параметры для метода addeventListener

  1. мероприятие

Первый параметр событие (который является обязательным параметром) – это строка, определяющая имя события. Например «Нажмите» , "Mouseover" , «Мышевка» и так далее.

2. обработчик события

Второй параметр, который, как и первый, также требуется, является функцией, которая вызывается при возникновении события. Объект события передается как первый параметр. Объект события зависит от типа события. Например, Мышевинт Объект пропускается для события клики.

3. Дополнительный параметр

Третий параметр, который является необязательным параметром, является объектом со свойствами:

  • Однажды : Его значение логическое. Если правда Слушатель удален после того, как он триггеры.
  • захват : Его значение также является логическим. Он устанавливает фазу, когда она должна обрабатывать событие, которое либо в пузырьке, либо фазе захвата. Значение по умолчанию это ложь Поэтому событие захвачено в фазе пузыри. Вы можете прочитать больше об этом здесь Отказ По историческим причинам варианты также могут быть правда или ложь Отказ
  • пассивный : Его значение также является логическим. Если это правда Затем обработчик не позвонит PreventDefault () Отказ PreventDefault () это метод объекта события.

Точно так же, если вы хотите прекратить мониторинг Нажмите Событие, вы можете использовать Element.removeeventListener Отказ Но это только работает, если слушатель события был зарегистрирован с использованием element.addeventListener Отказ Подпись функции похожа на element.addeventListener Отказ

element.removeEventListener(event, eventHandler, [options])

Для нас использовать Element.removeeventListener Удалить событие Функция прошла в качестве второго аргумента к element.addeventListener Должен быть названной функцией при добавлении слушателя события. Это гарантирует, что та же функция может быть передана Element.removeeventListener Если мы хотим удалить его.

Также стоит упомянуть здесь, что, если вы передали необязательные аргументы на обработчик события, вы также должны пройти те же необязательные аргументы для RemoveeventListener Отказ

const button = document.getElementById('btn');
button.removeEventListener('click', clickHandler)

Что такое объекты событий?

Обработчик событий имеет параметр под названием Объект событий который содержит дополнительную информацию о мероприятии.

Информация, хранящаяся в Объект событий зависит от типа события. Например, Объект событий передан на Нажмите Обработчик событий имеет свойство под названием цель которые ссылаются на элемент, из которого возникл событие Click.

В приведенном ниже примере, если вы нажмете элемент с помощью ID BTN , Event.Target будет ссылаться на это. Все объявления событий Click передаются Объект событий с цель имущество. Как уже указали, разные события имеют Объект событий Параметры, которые хранят разную информацию.

const button = document.getElementById("btn");
button.addEventListener("click", event => {
  console.log(event.target);
})

Ценность этого

В событие обработчик, ценность это это элемент, на котором зарегистрирован обработчик событий. Обратите внимание, что элемент, на котором зарегистрирован элемент, на котором зарегистрирован обработчик событий, может не обязательно быть таким же, как элемент, на котором произошло событие.

Например, в указанном ниже обработчик события зарегистрирован на обертке. Обычно стоимость это такой же, как Event.currentTarget Отказ Если вы нажмете кнопка ценность это внутри OnClickHandler это Div не кнопка потому что это Div на котором обработчик событий зарегистрирован, хотя щелчок возникла с кнопки.

Это называется Распространение событий Отказ Это очень важная концепция, которую вы можете прочитать о здесь если ты заинтересован.

Заключение

В этой статье мы посмотрели:

  • События браузера и что они
  • Разные способы добавления обработчиков событий на элементы DOM
  • Параметры объекта события к обработчикам событий
  • Значение это в обработчике событий

Читайте ещё по теме: