原生JS开发虚拟键盘 按钮onclick事件绑定及取值问题

核心实现逻辑 #

• 事件绑定位置：动态创建按键按钮的环节直接绑定即可，不需要等所有按键渲染完成后再遍历DOM查找元素绑定，减少DOM查询开销。如果后续按键会动态增减，优先用事件委托方案，只需要给键盘父容器绑定一次事件。
• 按键内容获取：点击事件触发时，通过事件对象的target属性即可拿到当前被点击的按键元素，直接读取元素的文本内容即可，推荐用textContent而非innerHTML，避免意外解析HTML标签带来的问题。
• 输入框赋值：采用追加赋值的方式更新输入框内容，不要直接覆盖原有值，符合正常键盘的输入逻辑。

修改后可直接运行的代码 #

HTML部分 #

</head>          
<body onload="printKeys()">
  <div class="text">
    <input type="text" class="your-text" id="input" placeholder="Your text here..">
    <button class="copy-btn">Copy</button>
  </div>
  <div class="keyboard" id="keyboard"></div>
  <script src="index.js"></script>
</body>
</html>

注：input是自闭合标签，不需要额外加</input>闭合标签，修正后符合HTML规范。

JavaScript部分（逐个绑定事件方案） #

const alphaKeys = ["a","b","c"];
const numKeys = "1234567890";
const keyboard = document.getElementById("keyboard");
const input = document.getElementById('input')

// 渲染键盘
function printKeys() {
  for (let i = 0; i < alphaKeys.length; i++) {
    const keyBtn = document.createElement("button");
    keyBtn.textContent = alphaKeys[i];
    // 创建元素后直接绑定点击事件
    keyBtn.addEventListener('click', function(e) {
      // 拿到当前点击按键的内容
      const pressKey = e.target.textContent;
      // 追加内容到输入框
      input.value += pressKey;
    })
    keyboard.appendChild(keyBtn);
  }
  // 数字键、功能键（退格、空格、回车等）可以按照相同逻辑扩展
}

更优的事件委托方案 #

如果按键数量多、或者后续会动态新增/删除按键，不需要逐个给按钮绑定事件，直接给键盘父容器绑定一次事件即可，代码更简洁性能更好：

const alphaKeys = ["a","b","c"];
const numKeys = "1234567890";
const keyboard = document.getElementById("keyboard");
const input = document.getElementById('input')

// 只需要给父容器绑定一次点击事件
keyboard.addEventListener('click', function(e) {
  // 校验点击的目标是按键按钮
  if(e.target.tagName === 'BUTTON') {
    input.value += e.target.textContent;
  }
})

function printKeys() {
  for (let i = 0; i < alphaKeys.length; i++) {
    const keyBtn = document.createElement("button");
    keyBtn.textContent = alphaKeys[i];
    // 这里不需要再单独绑事件
    keyboard.appendChild(keyBtn);
  }
}

window.onload = printKeys;

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