如何实现按钮列表中单个按钮激活与其余按钮停用功能？

我在仪表盘模拟项目预览的div内有一组按钮，需要实现点击某按钮时激活它，同时停用其他按钮的功能。目前我通过以下代码获取按钮元素：

var container = document.querySelector('#buttonscontainer');
var matches = container.querySelectorAll('div.divscontainer > button');
//identify the buttons inside the div, maybe not necessary...
  for (var i = 0; i < matches.length; i++) {
    //activate the current button
    //deactivate other buttons (if ever been activated) 
  }

我考虑在div内使用addEventListener，但不知从何入手，只需要了解可探索的函数方向。

可探索的方向：

• 事件委托：直接给container绑定click事件，借助事件冒泡机制，通过event.target判断点击对象是否为目标按钮，无需逐个给按钮添加监听。
• 类名操作API：利用元素的classList属性控制激活状态，核心方法包括classList.add()（添加激活类）、classList.remove()（移除激活类）、classList.contains()（判断是否已激活）。
• 遍历重置逻辑：点击按钮时，遍历所有获取到的按钮元素，先统一清除它们的激活状态，再给当前点击的按钮设置激活状态。
• 单个按钮事件绑定：在现有for循环内，给每个按钮单独绑定click事件，在事件处理函数中完成自身激活、其他按钮停用的逻辑。

内容的提问来源于stack exchange，提问作者Albert Badias