Читатели като вас помагат в подкрепа на MUO. Когато правите покупка чрез връзки на нашия сайт, ние може да спечелим комисионна за партньор. Прочетете още.

Обработката на събития е важна концепция в JavaScript. Събитията позволяват на HTML страниците да бъдат динамични и интерактивни, което ви позволява да създавате привлекателни потребителски интерфейси. Можете да напишете код за стартиране на JavaScript, когато възникне събитие в DOM.

Събитие може да бъде, когато потребител щракне върху HTML елемент, страницата се зареди или когато стойността на полето за въвеждане се промени. Можете да напишете код, който променя структурата на HTML, когато възникне събитие. Научете три различни начина, по които можете да добавите слушатели на събития към вашия код.

1. Методът addEventListener

Методът addEventListener е един от популярните методи за слушане на събития. Има три параметъра:

  • Обект, представящ събитието.
  • Функция за справяне с него.
  • Незадължителен булев, useCapture, който описва как събитието се разпространява в DOM.
instagram viewer

Събитието може да бъде всяко определено DOM събитие на целеви елемент. Функция е настроена да реагира на това събитие, когато то се случи.

Функцията може да бъде анонимна или наименувана функция. Популярните цели включват елемент, неговите деца, документ и прозорец, който поддържа събитие.

addEventListener() е препоръчителен метод за администриране на слушатели на събития в JavaScript. Работи с всяка цел на събитие, не само с HTML елементи, и поддържа множество манипулатори на събития.

Може да искате да изпълните някакъв код на DOM. Можете да отпечатате текст, да извършите изчисления или да покажете изображение, когато потребител щракне върху бутона.

Нека илюстрираме със следния код:

html>
<html>
<тяло>
<h1>Методът addEventListener с функцииh1>
<бутондокумент за самоличност="myBtn">Натисни тукбутон>
<стрдокумент за самоличност="демонстрация">стр>
тяло>
html>

След това добавете слушателя на събития с помощта на бутона.

конст елемент = документ.getElementById("myBtn");
element.addEventListener("клик", myFunction1);
функцияmyFunction1() {
документ.getElementById("демонстрация").innerHTML += „Фукцията е изпълнена! "
}

Когато щракнете върху бутона, на екрана се отпечатва текстът „Изпълнена функция“, както е показано по-долу.

2. Делегиране на събития на addEventListener

Делегирането на събитие в JavaScript е модел, използван за обработка на множество събития. Вместо да добавяте слушател на събития към всеки елемент, вие добавяте слушателя на събития само към предшестващ елемент. Можете да получите достъп до елемента, който е задействал събитието чрез .мишена свойство на обекта на събитието.

Това гарантира, че всички елементи, към които се насочвате, имат споделено поведение. Без него ще трябва да добавите слушател на събития към всеки от тях ръчно.

Ето пример за делегиране на събитие:

html>
<html>
<тяло>
<h1> Делегиране на събитие върху бутониh1>
<див>
<бутон>Бутон 1бутон>
<бутон>Бутон 2бутон>
<бутон>Бутон 3бутон>
див>
тяло>
html>

След това добавете слушателите на събития към всички бутони само с няколко реда код.

конст div = документ.querySelector("div")
div.addEventListener("клик", (събитие) => {
ако (event.target.tagName "БУТОН") {
конзола.log(„Щракнат бутон“)
 }
});

Делегирането на събитие е модел, базиран на бълбукане на събитие. Прехвърлянето на събития се случва, когато даден елемент получи събитие и го предаде на своите родителски и предшестващи елементи в DOM. Това е разпространение на събитието концепция, която се случва по подразбиране в JavaScript.

3. Използване на атрибута onclick

Можете да използвате атрибута onclick, за да стартирате JavaScript, когато потребителите кликнат върху елемент. Подобно на метода addEventListener, можете да използвате метода onclick за отпечатване на текст, извършване на изчисления и промяна на характеристиките на елемента на DOM.

Можете да добавите слушателя на събития onclick като вграден манипулатор на събития към HTML елемента. Събитието възниква, когато потребител кликне върху елемента. Променете динамично цвета на следния параграф с метода onclick:

html>
<html>
<тяло>
<h1> Изпълнение на събития onClickh1>
<стрдокумент за самоличност="демонстрация"onclick="myFunction()">
 Щракнете върху мен, за да променя цвета на текста си.
стр>
тяло>
html>

В JavaScript файла добавете следния код:

функцияmyFunction() {
документ.getElementById("демонстрация").style.color = "червен";
}

Резултатът ще се появи, както е показано:

Защо да научите за слушателите на събития?

Като разработчик на JavaScript често ще използвате слушатели на събития в проекти. Можете да създадете множество функции със слушатели на събития, включително балончета и улавяне на събития. Разбирането на тези концепции ще ви улесни при създаването на динамични интерфейси на вашите приложения.