как повесить событие на всё( где используется буттон)
3 ответа
Как повесить событие на все кнопки на странице?
Вот так:
// Выбираем все кнопки на странице и получаем массив
var btns = document.querySelectorAll('button')
// Проходим по массиву
btns.forEach(function(btn) {
// Вешаем событие клик
btn.addEventListener('click', function(e) {
console.log('Button clicked' + e.target.classList);
})
})
<button class="btn-1">1</button>
<button class="btn-2">2</button>
<button class="btn-3">3</button>
<button class="btn-4">4</button>
<button class="btn-5">5</button>
-
Приветствую. Можно же делегировать родителю. :) Будет всего один обработчик, а так у Вас целых 5 пополнили очередь.– user210322Commented 21 июл. 2018 в 12:14
-
@Qwerty_Wasd приветствую. делегировать родителю с целью прослушки всех дочерних элементов или потом выделять на кого реагировать, а на кого нет?– Kosta B.Commented 21 июл. 2018 в 12:33
-
В зависимости от преследуемой цели - если нужно одно действие на всех, можно дать им один класс и e.target.classList.contains() возьмет их– user210322Commented 21 июл. 2018 в 12:54
можно сделать с использованием jQuery:
jQuery(".className").click(functionName);
html-разметка:
<button class="className">1</button>
<button class="className">2</button>
<button class="className">3</button>
Как вариант делегировать родителю, чтобы не гадить в очередь. Если нужно одно действие на всех, то
document.body.addEventListener('click', e => {
if (e.target.classList.contains('classes')) alert(1);
})
<button class="classes">Один</button>
<button class="classes">Два</button>
<button class="classes">Три</button>
<button class="classes">Четыре</button>
<button class="classes">Пять</button>
Если нужно разделить задачи, то
document.body.addEventListener('click', e => {
if (e.target.classList.contains('one')) alert(`Я выполню задачу ${e.target.textContent}`);
if (e.target.classList.contains('two')) alert(`Я выполню задачу ${e.target.textContent}`)
//и так далее
});
<button class="classes one">Один</button>
<button class="classes two">Два</button>
<button class="classes three">Три</button>
<button class="classes four">Четыре</button>
<button class="classes five">Пять</button>