Как добавить onclick к кнопке через js

4 года назад

Человек-Молекула

Присоединяйтесь к нашему Telegram-сообществу

Ответы

Свойство onclick у элемента отвечает за обработку события клика по элементу. Чтобы добавить обработчик, достаточно просто присвоить этому свойству функцию, которая вызовется при клике:

// Получаем элемент
const element = document.getElementById('test');
// Добавляем обработку события
element.onclick = (event) => { 
  // ...
  console.log(event);
};

Этот способ имеет недостаток: нельзя навешать несколько обработчиков-функций на событие.

// Получаем элемент
const element = document.getElementById('test');
// Добавляем обработку события
element.onclick = (event) => { 
  // ...
  console.log('first handler');
};
// Добавляем второй обработчик
element.onclick = (event) => { 
  // ...
  console.log('second handler');
};

Первый обработчик перезапишется вторым. Чтобы этого избежать, лучше использовать addEventListener():

// Получаем элемент
const element = document.getElementById('test');
// Добавляем обработку события
element.addEventListener('click', (event) => { 
  // ...
  console.log('first handler');
});
// Добавляем второй обработчик
element.addEventListener('click', (event) => { 
  // ...
  console.log('second handler');
});

В таком случае оба обработчика будут срабатывать по клику на элементе.

3 года назад

Ivan Gagarinov

10 месяцев

Фронтенд-разработчик

Верстка на HTML5 и CSS3, Программирование на JavaScript в браузере, разработка клиентских приложений используя React

2 месяца

ООП на Javascript

Навык глубокого понимания архитектуры и написания чистого кода, позволяющий решать сложные задачи

1 месяц

СИКП на JS

Навык понимать программы на фундаментальном уровне, уверенно проходить собеседования и решать сложные задачи

1 месяц

Асинхронное программирование на JS

Навык асинхронного программирования в JavaScript: писать быстрый код, расти в грейде и успешно проходить собеседования.

8 месяцев

Автоматизатор тестирования на JavaScript

Git, JavaScript, Playwright, бэкенд-тесты, юнит-тесты, API-тесты, UI-тесты, Github Actions, HTTP/HTTPS, API, Docker, SQL

Похожие вопросы