onclick javascript примеры

Событие onclick - это событие JavaScript, которое происходит при нажатии пользователем на элемент. Это событие может быть привязано к любому HTML-элементу и используется для выполнения определённого кода при нажатии. В этой статье рассмотрим различные примеры использования этого события.

Пусть у нас есть следующая кнопка:

html<button id="btn">btn</button>

Получим ссылку на нашу кнопку с помощью метода querySelector:

javascriptlet btn = document.querySelector('#btn');

Давайте рассмотрим три различных способа навешивания события onclick на нашу кнопку.

Пример 1

Навесим на кнопку обработчик события onclick с помощью метода addEventListener:

javascriptbtn.addEventListener('click', function() {
  console.log('!!!');
});

Пример 2

Навесим на кнопку обработчик события с помощью свойства onclick:

javascriptbtn.onclick = function() {
  console.log('!!!');
};

Пример 3

Дана следующая функция:

javascriptfunction func() {
  console.log('!!!');
};

Навесим эту функцию на кнопку в качестве реакции на клик с помощью HTML атрибута onclick:

html<button id="btn" onclick="func()">btn</button>