js通过事件委托按钮的类名更改背景颜色
时间: 2023-09-04 12:15:33 浏览: 62
可以通过以下代码实现基于事件委托的方式更改按钮背景颜色:
首先,HTML代码中需要有一个包含按钮元素的父元素,并且给它一个类名,例如:
```html
<div class="btn-group">
<button class="btn">按钮1</button>
<button class="btn">按钮2</button>
<button class="btn">按钮3</button>
</div>
```
然后,在JavaScript中获取该父元素,并添加一个事件监听器,当任意一个按钮被点击时,更改它的背景颜色。代码如下:
```javascript
const btnGroup = document.querySelector('.btn-group'); // 获取父元素
btnGroup.addEventListener('click', function(event) { // 添加事件监听器
if (event.target.classList.contains('btn')) { // 判断点击的是否为按钮
event.target.style.backgroundColor = 'red'; // 更改背景颜色
}
});
```
在上面的代码中,我们使用`querySelector`方法获取了类名为`btn-group`的父元素,并将其存储在`btnGroup`变量中。然后,我们使用`addEventListener`方法添加了一个点击事件监听器。当任意一个按钮被点击时,事件处理函数中的代码将被执行。在事件处理函数中,我们首先使用`contains`方法判断点击的元素是否为按钮,如果是,则将其背景颜色更改为红色。通过使用事件委托的方式,我们只需要在父元素上添加一个事件监听器,就可以监听所有按钮的点击事件,而不必为每个按钮单独添加事件监听器,减少了代码的复杂度。