Как сделать вызов события по клику через 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'));

Введение в события
События на практике