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

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

От создателя: события находятся всюду в веб-приложениях. От события DOMContentLoaded, которое запускается немедля, когда браузер завершает загрузку и анализирует HTML, до события unload, которое запускается конкретно перед тем, как юзер покидает ваш веб-сайт. Опыт использования веб-приложения, на самом деле, представляет собой просто серию событий. Для разрабов эти события помогают найти, что лишь что вышло в приложении, какое состояние юзера было в конкретное время и почти все другое.

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

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

Как сделать пользовательское событие в JavaScript

Внедрение конструктора событий

Внедрение конструктора CustomEvent

Отправка пользовательских событий в JavaScript

Как работают пользовательские события JavaScript?

Перетаскивание JavaScript

Как применять деструктуризацию объекта в JavaScript

Чтоб следовать этому управлению, вы обязаны иметь базисные познания о:

HTML и CSS

JavaScript и ES6

DOM и манипуляции с DOM

Давайте начнем!

Как сделать пользовательское событие в JavaScript

Пользовательские события можно создавать 2-мя методами:

Внедрение конструктора Event

Внедрение конструктора CustomEvent

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

Внедрение конструктора Event

Пользовательское событие быть может сотворено при помощи конструктора Event, к примеру:

JavaScript

12345const myEvent = new Event(‘myevent’, {  bubbles: true,  cancelable: true,  composed: false})

В приведенном выше фрагменте мы сделали событие myevent, передав имя события конструктору Event. Имена событий нечувствительны к регистру, потому myevent такое же, как myEvent и MyEvent и т.д. Конструктор события также воспринимает объект, который описывает некие принципиальные характеристики, касающиеся события.

bubbles

Свойство bubbles описывает, обязано ли событие распространяться ввысь к родительскому элементу. Установка значения true значит, что если событие отчаливает в дочернем элементе, родительский элемент может прослушивать событие и делать действие на его базе. Это поведение большинства нативных событий DOM, но для пользовательских событий по дефлоту установлено false.

Если вы желаете, чтоб событие отчаливало лишь определенному элементу, вы сможете приостановить распространение события при помощи event.stopPropagation(). Это обязано быть в оборотном вызове, который прослушивает событие. Подробнее о этом позднее.

cancelable

Как надо из наименования, cancelable показывает, обязано ли событие быть отменяемым. Нативные события DOM можно отменять по дефлоту, потому вы сможете вызывать event.preventDefault(), что предупредит действие события по дефлоту. Если для пользовательского события cancelable установлено значение false, при вызове event.preventDefault() не производится никаких действий.

composed

Свойство composed описывает, обязано ли это событие всплывать из теневого DOM (сделанные при использовании интернет — компонент) к реальному DOM. Если для bubbles установлено значение false, это не имеет значения, поэтому что вы очевидно указываете событию не всплывать ввысь. Но, если вы желаете выслать пользовательское событие в веб-компонент и прослушивать его на родительском элементе в настоящей модели DOM, то для скомпонованного характеристики нужно установить значение true.

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

READ
Новое во Vue: Что ожидать во Vue 3

Вы также не сможете отправлять данные с внедрением собственных событий DOM. Данные могут быть получены лишь от цели события.

Внедрение конструктора CustomEvent

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

JavaScript

123456const myEvent = new CustomEvent(«myevent», {  detail: {},  bubbles: true,  cancelable: true,  composed: false,});

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

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

Отправка пользовательских событий в JavaScript

Опосля сотворения событий у вас обязана быть возможность отправлять их. События могут быть высланы хоть какому расширяющемуся объекту EventTarget, и они включают в себя все элементы HTML, документ, окно и т.д. Вы сможете отправлять пользовательские события последующим образом:

JavaScript

1234567const myEvent = new CustomEvent(«myevent», {  detail: {},  bubbles: true,  cancelable: true,  composed: false,});document.querySelector(«#someElement»).dispatchEvent(myEvent);

Чтоб прослушивать настраиваемое событие, добавьте прослушиватель событий к элементу, который вы желаете прослушивать, так же, как и с нативными событиями DOM.

JavaScript

123document.querySelector(«#someElement»).addEventListener(«myevent», (event) => {  console.log(«I’m listening on a custom event»);});

Как работают пользовательские события JavaScript?

Чтоб показать, как применять пользовательские события в приложении JavaScript, мы сделаем обычное приложение, которое дозволяет юзерам добавлять профиль и автоматом получать карточку профиля.

Создание пользовательского интерфейса

Сделайте папку, назовите ее как желаете и сделайте в папке файл index.html. Добавьте последующее в index.html:

1234567891011121314151617181920212223242526272829303132333435363738394041<!DOCTYPE html><html lang=»en»>  <head>    <meta charset=»UTF-8″ />    <meta name=»viewport» content=»width=device-width, initial-scale=1.0″ />    <title>Custom Events Application</title>    <link rel=»stylesheet» href=»style.css» />  </head>  <body>    <h1>Profile Card</h1>    <main>      <form class=»form»>        <h2>Enter Profile Details</h2>        <section>          Drag an Image into this section or          <label>            select an image            <input type=»file» id=»file-input» accept=»image/*» />          </label>        </section>        <div class=»form-group»>          <label for=»name»> Enter Name </label>          <input type=»text» name=»name» id=»name» autofocus />        </div>        <div class=»form-group»>          <label for=»occupation»> Enter Occupation </label>          <input type=»text» name=»occupation» id=»occupation» />        </div>      </form>       <section class=»profile-card»>        <div class=»img-container»>          <img src=»http://via.placeholder.com/200″ alt=»» />        </div>        <span class=»name»>No Name Entered</span>        <span class=»occupation»>No Occupation Entered</span>      </section>    </main>    <script src=»index.js»></script>  </body></html>

Тут мы добавляем разметку для странички. Страничка состоит из 2-ух разделов. 1-ый раздел — это форма, которая дозволяет юзеру созодать последующее:

Загрузить изображение при помощи перетаскивания либо вручную изберите файл изображения

Ввести имя

Ввести профессию

Данные, приобретенные из формы, будут отображаться во 2-м разделе — карточке профиля. 2-ой раздел просто содержит текст и изображения-заполнители. Данные, приобретенные из формы, перезапишут данные заполнителя содержимого. Сделайте файл style.css и заполните его последующим образом:

CSS

READ
Angular: Как создать полноэкранный календарь, такой как в Outlook
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879* {  box-sizing: border-box;}h1 {  text-align: center;}main {  display: flex;  margin-top: 50px;  justify-content: space-evenly;}.form {  flex-basis: 500px;  border: solid 1px #cccccc;  padding: 10px 50px;  box-shadow: 0 0 3px #cccccc;  border-radius: 5px;}.form section {  border: dashed 2px #aaaaaa;  border-radius: 5px;  box-shadow: 0 0 3px #aaaaaa;  transition: all 0.2s;  margin-bottom: 30px;  padding: 50px;  font-size: 1.1rem;}.form section:hover {  box-shadow: 0 0 8px #aaaaaa;  border-color: #888888;}.form section label {  text-decoration: underline #000000;  cursor: pointer;}.form-group {  margin-bottom: 25px;}.form-group label {  display: block;  margin-bottom: 10px;}.form-group input {  width: 100%;  padding: 10px;  border-radius: 5px;  border: solid 1px #cccccc;  box-shadow: 0 0 2px #cccccc;}#file-input {  display: none;}.profile-card {  flex-basis: 300px;  border: solid 2px #cccccc;  border-radius: 5px;  box-shadow: 0 0 5px #cccccc;  padding: 40px 35px;  align-self: center;  display: flex;  flex-direction: column;  justify-content: center;  align-items: center;}.img-container {  margin-bottom: 50px;}.img-container img {  border-radius: 50%;  width: 200px;  height: 200px;}.profile-card .name {  margin-bottom: 10px;  font-size: 1.5rem;}.profile-card .occupation {  font-size: 1.2rem;}

В конце концов, сделайте файл, чтоб вы могли добавить функциональность в приложение index.js.

Перетаскивание в JavaScript

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

JavaScript

1234567891011121314151617181920212223242526272829303132333435363738394041424344const section = document.querySelector(«.form section»); section.addEventListener(«dragover», handleDragOver);section.addEventListener(«dragenter», handleDragEnter);section.addEventListener(«drop», handleDrop); /** * @param {DragEvent} event */function handleDragOver(event) {  // Only allow files to be dropped here.  if (!event.dataTransfer.types.includes(«Files»)) {    return;  }  event.preventDefault();  // Specify Drop Effect.  event.dataTransfer.dropEffect = «copy»;} /** * @param {DragEvent} event */function handleDragEnter(event) {  // Only allow files to be dropped here.  if (!event.dataTransfer.types.includes(«Files»)) {    return;  }  event.preventDefault();} /** * @param {DragEvent} event */function handleDrop(event) {  event.preventDefault();  // Get the first item here since we only want one image  const file = event.dataTransfer.files[0];  // Check that file is an image.  if (!file.type.startsWith(«image/»)) {    alert(«Only image files are allowed.»);    return;  }  handleFileUpload(file);}

Тут мы избираем раздел из DOM. Это дозволяет прослушивать надлежащие события, которые нужны для обеспечения операции перетаскивания — а конкретно dragover, dragenter и drop.

В функции handleDragOver мы гарантируем, что перетаскиваемый элемент является файлом, и устанавливаем эффект перетаскивания на copy. handleDragEnter также делает аналогичную функцию, гарантируя, что мы обрабатываем лишь перетаскивание файлов.

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

Мы подтверждаем, что файл является изображением. Если это не так, мы отправляем сообщение о ошибке, чтоб юзер знал, что мы принимаем лишь файлы изображений. Если проверка прошла удачно, мы перебегаем к обработке файла в функции handleFileUpload, которую сделаем дальше. Обновите index.js:

JavaScript

123456789101112131415161718192021222324/** * @param {File} file */function handleFileUpload(file) {  const fileReader = new FileReader();  fileReader.addEventListener(«load», (event) => {    // Dispatch an event to the profile card containing the updated profile.    dispatchCardEvent({      image: event.target.result,    });  });  fileReader.readAsDataURL(file);} const profileCard = document.querySelector(«.profile-card»);const CARD_UPDATE_EVENT_NAME = «cardupdate»; function dispatchCardEvent(data) {  profileCard.dispatchEvent(    new CustomEvent(CARD_UPDATE_EVENT_NAME, {      detail: data,    })  );}
READ
Мобильное приложение VK научилось продвигать бизнес-страницы

Функция handleFileUpload воспринимает файл в качестве параметра и пробует прочесть файл в качестве URL данных при помощи устройства чтения файла.

Конструктор FileReader простирается от EventTarget, что дозволяет прослушивать события. Событие load запускается опосля загрузки изображения — в нашем случае как URL-адрес данных.

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

Опосля загрузки изображения нам нужно показать его в карточке профиля. Для этого мы отправим настраиваемое событие cardupdate в карточку профиля. dispatchCardEvent обрабатывает создание и отправку события в карточку профиля.

Если вы помните из раздела выше, у пользовательских событий есть свойство detail, которое можно применять для передачи данных. В этом случае мы передаем объект, содержащий URL-адрес изображения, приобретенный от программки чтения файлов.

Потом нам нужна карточка профиля для прослушивания обновлений карточки и соответственного обновления DOM.

JavaScript

12345678910profileCard.addEventListener(CARD_UPDATE_EVENT_NAME, handleCardUpdate);/** * @param {CustomEvent} event */function handleCardUpdate(event) {  const { image } = event.detail;  if (image) {    profileCard.querySelector(«img»).src = image;  }}

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

Как применять деструктуризацию объекта в JavaScript

handleCardUpdate получает событие как параметр. Используя деструктуризацию объекта, вы сможете получить свойство image из event.detail. Потом установите атрибут изображения src в карточке профиля как URL-адрес изображения, приобретенный из события. Чтоб разрешить юзерам загружать изображения через поле ввода:

JavaScript

12345const fileInput = document.querySelector(«#file-input»); fileInput.addEventListener(«change», (event) => {  handleFileUpload(event.target.files[0]);});

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

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

Последующая функция, которую необходимо добавить — это обновление имени и профессии:

JavaScript

12345678910111213const nameInput = document.querySelector(«#name»);const occupationInput = document.querySelector(«#occupation»); occupationInput.addEventListener(«change», (event) => {  dispatchCardEvent({    occupation: event.target.value,  });});nameInput.addEventListener(«change», (event) => {  dispatchCardEvent({    name: event.target.value,  });});

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

JavaScript

123456789101112131415/** * @param {CustomEvent} event */function handleCardUpdate(event) {  const { image, name, occupation } = event.detail;  if (image) {    profileCard.querySelector(«img»).src = image;  }  if (name) {    profileCard.querySelector(«span.name»).textContent = name;  }  if (occupation) {    profileCard.querySelector(«span.occupation»).textContent = occupation;  }}

Обновите функцию handleCardUpdate, чтоб она смотрелась как в приведенном выше фрагменте. Тут мы опять используем деструктуризацию объекта, чтоб получить изображение, имя и род занятий из event.detail. Опосля получения данных мы отображаем их на карточке профиля.

Заключение

Время от времени легче осознать код, когда вы думаете о нем исходя из убеждений отправляемых событий — как пользовательских, так и нативных событий DOM. Пользовательские события JavaScript могут сделать лучше взаимодействие с юзером вашего приложения при правильном использовании. Потому логично, что они включены в некие из ведущих фреймворков JavaScript, таковых как Vue.js (во Vue вы отправляете пользовательские события при помощи $emit). Код демонстрации, использованный в этом руководстве, доступен на GitHub.

Создатель: James James

Редакция: Команда webformyself.

Источник

Оценить статью
Блог о самом интересном.