Как сделать вызов события по клику через js?
Событию click необходимо назначить обработчик, который сработает, как только событие произошло. Назначить обработчик можно разными способами: атрибут HTML, свойство DOM-объекта, addEventListener.
Атрибут HTML
Атрибут имеет вид - on<событие>
.
<button onclick="alert('Hello world')">Кнопка</button>
При клике мышкой по кнопке выполнится код, указанный в атрибуте onclick.
Свойство DOM-объекта
Свойство имеет вид - on<событие>
.
button.onclick = () => alert('test')
Этот способ аналогичен предыдущему. Обработчик всегда хранится в свойстве DOM-объекта, а атрибут – это один из способов его инициализации.
addEventListener
Так как у элемента DOM может быть только одно свойство с именем onclick, то назначить более одного обработчика так нельзя. Этот недостаток и решает addEventListener.
Синтаксис
target.addEventListener(type, listener[, options]);
Обязательные параметры
type
- чувствительная к регистру строка, представляющая тип обрабатываемого события
listener
- функция, которая принимает уведомление, когда событие указанного типа произошло
Метод EventTarget.addEventListener()
<button id="myButton">Кнопка</button>
const button = document.getElementById('myButton');
button.addEventListener('click', () => alert('Hello world'));
button.addEventListener('click', () => alert('Hello Hexlet'));