Събитието е важна част от .Една уеб страница отговаря според събитие, което се е случило. Някои събития се генерират от потребители, а други се генерират от API. В тази статия ще видим как се случват събитията и как методът addEventListener в JavaScript се използва в следната последователност:
- Какво е слушател на събития?
- AddEventListener () в JavaScript
- Стойности на параметрите
- AddEventListener в JavaScript: Пример
Какво е слушател на събития?
Слушателят на събития е процедура в JavaScript, която чака да се случи събитие. Простият пример за събитие е потребител, който щрака с мишката или натиска клавиш на клавиатурата.
The addEventListener () е вграден JavaScript функция което взема събитието за прослушване и втори аргумент, който се извиква всеки път, когато описаното събитие се задейства. Всеки брой обработчици на събития може да бъде добавен към един елемент, без да се презаписват съществуващите обработчици на събития.
addEventListener () в JavaScript
Някои от Характеристика от метода за слушане на събития включват:
- The addEventListener () метод прикачва манипулатор на събития към посочения елемент.
- Този метод прикачва манипулатор на събития към елемент без презаписване съществуващи манипулатори на събития.
- Можете да добавите много обработчици на събития към един елемент.
- Можете да добавите много манипулатори на събития на същия тип към един елемент , т.е. две събития „щракване“.
- Слушатели на събития могат да бъдат добавени към всеки РЕШЕНИЕ обект не само на HTML елементи. т.е. обектът на прозореца.
- Методът addEventListener () го прави по-лесно да контролира как събитието реагира да бълбука.
Когато се използва методът addEventListener (), JavaScript се отделя от маркиране, за по-добра четливост и ви позволява да добавяте слушатели на събития, дори когато не контролирате HTML маркирането.
Също така можете лесно да премахнете слушател на събития, като използвате метод на removeEventListener () .
Синтаксис:
target.addEventListener (тип, слушател [, опции]) target.addEventListener (тип, слушател [, useCapture]) target.addEventListener (тип, слушател [, useCapture, wantsUntrusted])
Стойности на параметрите
| Параметър | Описание |
събитие | Задължително. String, който указва името на събитието. Забележка: Не използвайте префикса „on“. Например използвайте „щракване“ вместо „onclick“. За списък на всички HTML DOM събития вижте пълната ни справка за обекти на HTML DOM. |
функция | Задължително. Задава функцията, която да се изпълнява, когато се случи събитието. if израз в sql заявка Когато се случи събитието, обектът на събитието се предава на функцията като първи параметър. Видът на събитието обект зависи от посоченото събитие. Например събитието „щракване“ принадлежи на обекта MouseEvent. |
useCapture | По желание. Булева стойност, която определя дали събитието трябва да бъде изпълнено във фазата на улавяне или във фазата на балончета. Възможни стойности: true - манипулаторът на събитията се изпълнява във фазата на улавяне - по подразбиране. Манипулаторът на събитията се изпълнява във фаза на балончета |
След като вече знаете как работи слушателят на събития, нека разгледаме пример за addEventListener () в JavaScript.
addEventListener () в JavaScript: Пример
& lt! DOCTYPE html & gt & lttml & gt & ltbody & gt & ltp & gt Този пример използва метода addEventListener (), за да изпълни функция, когато потребител щракне върху бутон. & lt / p & gt & ltbutton id = 'myBtn' & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt & gt ('myBtn'). addEventListener ('click', myFunction) функция myFunction () {document.getElementById ('demo'). innerHTML = 'Hello World'} & lt / script & gt & lt / body & gt & lt / html & gt 
С това стигнахме до края на този addEventListener в JavaScript. Надявам се, че сте разбрали как слушателят на събитието метод работи в JavaScript.
Вижте нашите което се предлага с обучение под ръководството на инструктори на живо и опит в реалния живот на проекти. Това обучение ви кара да владеете умения за работа с back-end и front-end уеб технологии. Включва обучение по уеб разработка, jQuery, Angular, NodeJS, ExpressJS и MongoDB.
Имате въпрос към нас? Моля, споменете го в раздела за коментари в блога „addEventListener в JavaScript“ и ние ще се свържем с вас.