如何将事件监听器添加到多个按钮,并根据单击的按钮获取每个按钮的值。例如:
<button id='but1'>
Button1
</button>
<button id='but2'>
Button2
</button>
<button id='but3'>
Button3
</button>
<button id='but4'>
Button4
</button>
因此,在javascript上,我不必引用每个按钮,例如:
Const but1 = document.getElementById('but1');
but1.addEventListener('click');
最佳答案
您实际上不需要将监听器添加到所有按钮。 JS中有Bubbling and capturing这样的东西,因此您可以用buttons
包装所有的div
并捕获那里的所有事件。但是请确保您检查点击是否在button
上,而不是在div
上。
const wrapper = document.getElementById('wrapper');
wrapper.addEventListener('click', (event) => {
const isButton = event.target.nodeName === 'BUTTON';
if (!isButton) {
return;
}
console.dir(event.target.id);
})
div {
padding: 20px;
border: 1px solid black;
}
<div id='wrapper'>
<button id='but1'>
Button1
</button>
<button id='but2'>
Button2
</button>
<button id='but3'>
Button3
</button>
<button id='but4'>
Button4
</button>
</div>