在一个包含多个按钮的页面上，使用事件委托的方式为这些按钮添加点击事件监听器。当点击任何一个按钮时，都应该在控制台输出该按钮的文本内容。

Question

1.事件委托：题目：在一个包含多个按钮的页面上，使用事件委托的方式为这些按钮添加点击事件监听器。当点击任何一个按钮时，都应该在控制台输出该按钮的文本内容。
a.提示：将事件监听器添加到它们的共同父元素上，并使用event.target来确定是哪个子元素被点击。

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

这是一个很好的问题，对于实现您要求的功能，这是一个基于JavaScript的事件委托的示例解决方案：

假设您有一组按钮，所有的按钮都包含一个公共的类名（例如myButton），您可以这样使用事件委托来为它们添加点击事件监听器：

HTML部分（假设有五个按钮）：

<div id="buttonContainer">
    <button class="myButton">按钮1</button>
    <button class="myButton">按钮2</button>
    <button class="myButton">按钮3</button>
    <button class="myButton">按钮4</button>
    <button class="myButton">按钮5</button>
</div>

JavaScript部分：

// 获取所有的按钮元素的父元素
var parentElement = document.getElementById('buttonContainer');

// 为父元素添加点击事件监听器
parentElement.addEventListener('click', function(event) {
    // 检查被点击的元素是否有我们想要的类名
    if (event.target.classList.contains('myButton')) {
        // 如果是，则在控制台输出该按钮的文本内容
        console.log(event.target.innerText);
    }
});

在这个例子中，我们并没有为每个按钮单独添加事件监听器，而是将事件监听器添加到了它们的共同父元素上。当点击事件发生时，我们通过检查event.target来确定是哪个子元素（按钮）被点击，并据此执行相应的操作。这种方式可以大大减少事件监听器的数量，提高性能。