封装按钮 实现点击不同按钮触发不同事件

实现封装按钮可以使用以下步骤：

1. 在 HTML 中创建按钮元素，为每个按钮设置一个唯一的 id 和相应的文本内容。

<button id="btn1">Button 1</button>
<button id="btn2">Button 2</button>
<button id="btn3">Button 3</button>

2. 在 JavaScript 中获取按钮元素，并为每个按钮添加点击事件监听器。

var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");

btn1.addEventListener("click", function() {
  // Button 1 clicked, do something
});

btn2.addEventListener("click", function() {
  // Button 2 clicked, do something
});

btn3.addEventListener("click", function() {
  // Button 3 clicked, do something
});

3. 将按钮和对应事件封装在一个对象中，方便管理和维护。

var buttons = [
  {
    id: "btn1",
    text: "Button 1",
    action: function() {
      // Button 1 clicked, do something
    }
  },
  {
    id: "btn2",
    text: "Button 2",
    action: function() {
      // Button 2 clicked, do something
    }
  },
  {
    id: "btn3",
    text: "Button 3",
    action: function() {
      // Button 3 clicked, do something
    }
  }
];

for (var i = 0; i < buttons.length; i++) {
  var button = document.getElementById(buttons[i].id);
  button.textContent = buttons[i].text;
  button.addEventListener("click", buttons[i].action);
}

通过以上步骤，我们可以方便地封装多个按钮，并实现不同的点击事件。