Метод addEventListener - создание событий на JavaScript
Метод addEventListener позволяет назначить
на элемент обработчики событий. С его помощью,
можно указать, например, что делать при клике
по кнопке или что делать при наборе текста
в текстовом поле. В первом параметре указываем
тип передаваемого события, во втором - функцию, которая
будет срабатывать после события, указанного
в первом параметре. В третьем необязательном параметре
передаем характеристики объекта (once, capture,
passive) или параметр useCapture.
Синтаксис
элемент.addEventListener('тип события', функция, [характеристики объекта]);
или
элемент.addEventListener('тип события', функция, [useCapture]);
Пример
Давайте сделаем так, чтобы при клике на кнопку выводилось сообщение:
<input type="button" id="button" value="click me">
let button = document.querySelector('#button');
button.addEventListener('click', function() {
alert('message');
});
:
Пример
Давайте напишем код, чтобы при потере фокуса в инпуте выводилось сообщение с текстом этого инпута:
<input id="input" value="text">
let input = document.querySelector('#input');
input.addEventListener('blur', function() {
alert(this.value);
});
:
Пример
Давайте сделаем так, чтобы при клике на кнопку сообщение выводилось в консоль только один раз. Для этого воспользуемся вторым параметром:
<input type="button" id="button" value="click me">
let button = document.querySelector('#button');
button.addEventListener('click',
function() {
console.log('message');
},
{
once: true
}
);
Пример
Параметр passive запрещает вызывать метод
event.preventDefault при обработке события.
Давайте к предыдущему примеру применим метод
event.preventDefault, а также укажем в
параметре passive значение true:
<input type="button" id="button" value="click me">
let button = document.querySelector('#button');
button.addEventListener('click',
function(event) {
event.preventDefault();
console.log('No message');
},
{
passive: true
}
);
После выполнения кода мы увидим следующие сообщения:
'No message';
'Unable to preventDefault inside passive event listener invocation.'
Пример
Параметр useCapture в значении
true показывает всплытие событий
от внутреннего элемента до внешнего, при
значении false - от внешнего
до внутреннего элемента. При передаче
параметра useCapture его имя опускается
и записывает просто true или false.
Давайте посмотрим как всплывают события в родительском
и дочернем элементах при клике на них:
<div id="parent">Parent
<p id="child">Child</p>
</div>
#parent{
width: 60px;
padding: 10px;
border: 1px solid red;
text-align: center;
}
#child{
width: 60px;
marging-right: 40px;
border: 1px solid blue;
text-align: center;
}
let parent = document.querySelector('#parent');
let child = document.querySelector('#parent');
parent.addEventListener('click',
() => alert('parent'),
true
);
child.addEventListener('click',
() => alert('child'),
true
);
:
Смотрите также
-
метод
removeEventListener,
который отвязывает событие от элемента