js实现单击

实现单击事件的 JavaScript 方法

方法一：使用 onclick 属性
在 HTML 元素中直接添加 onclick 属性，指定触发时执行的 JavaScript 代码：

<button onclick="alert('Clicked!')">点击我</button>

方法二：通过 addEventListener 绑定事件
通过 JavaScript 动态绑定单击事件，推荐用于复杂逻辑或需要解绑的场景：

document.getElementById("myButton").addEventListener("click", function() {
  console.log("按钮被单击");
});

方法三：事件委托
适用于动态生成的元素或批量处理子元素事件，通过父元素代理监听：

document.getElementById("parent").addEventListener("click", function(event) {
  if (event.target.classList.contains("child")) {
    alert("子元素被点击");
  }
});

方法四：箭头函数简化
ES6 箭头函数可简化回调写法：

document.querySelector(".item").addEventListener("click", () => {
  console.log("使用箭头函数处理单击");
});

注意事项

• 避免混用 onclick 和 addEventListener，可能导致事件重复触发。
• 事件委托需检查 event.target 确保目标元素匹配。
• 移动端可能需要额外处理 touchstart 事件兼容单击行为。