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

Question

Ivan Gagarinov · Accepted Answer

Свойство `onclick` у элемента  отвечает за обработку события клика по элементу. Чтобы добавить обработчик, достаточно просто присвоить этому свойству функцию, которая вызовется при клике:

```javascript
// Получаем элемент
const element = document.getElementById('test');
// Добавляем обработку события
element.onclick = (event) => { 
  // ...
  console.log(event);
};
```

Этот способ имеет недостаток: нельзя навешать несколько обработчиков-функций на событие.

```javascript
// Получаем элемент
const element = document.getElementById('test');
// Добавляем обработку события
element.onclick = (event) => { 
  // ...
  console.log('first handler');
};
// Добавляем второй обработчик
element.onclick = (event) => { 
  // ...
  console.log('second handler');
};
```

Первый обработчик перезапишется вторым. Чтобы этого избежать, лучше использовать `addEventListener()`:

```javascript
// Получаем элемент
const element = document.getElementById('test');
// Добавляем обработку события
element.addEventListener('click', (event) => { 
  // ...
  console.log('first handler');
});
// Добавляем второй обработчик
element.addEventListener('click', (event) => { 
  // ...
  console.log('second handler');
});
```

В таком случае оба обработчика будут срабатывать по клику на элементе.

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

Ответы

Каталог