js 实现点击

实现点击事件的 JavaScript 方法

基础事件监听
通过 addEventListener 绑定点击事件，适合动态元素或需要解绑的场景：

document.getElementById('button').addEventListener('click', function() {
  console.log('元素被点击');
});

HTML 内联事件
直接在 HTML 元素中定义 onclick 属性，适合简单交互：

<button onclick="alert('点击触发')">按钮</button>

事件委托
通过父元素监听子元素点击，适合动态生成的元素或批量处理：

document.querySelector('.parent').addEventListener('click', function(event) {
  if (event.target.classList.contains('child')) {
    console.log('子元素被点击');
  }
});

高级应用场景

阻止默认行为
调用 event.preventDefault() 取消元素的默认动作（如链接跳转）：

document.querySelector('a').addEventListener('click', function(event) {
  event.preventDefault();
  console.log('阻止了链接跳转');
});

事件冒泡控制
使用 event.stopPropagation() 阻止事件向上传播：

document.querySelector('.inner').addEventListener('click', function(event) {
  event.stopPropagation();
  console.log('事件不会触发外层监听');
});

兼容性与性能优化

移除事件监听
需要保留函数引用以便解绑：

const handler = function() { console.log('仅触发一次'); };
element.addEventListener('click', handler);
element.removeEventListener('click', handler);

被动事件提升滚动性能
标记为 passive: true 优化移动端滚动体验：

document.addEventListener('click', function() {}, {
  passive: true,
  capture: false
});