js实现点击事件

使用 addEventListener 绑定点击事件

通过 addEventListener 方法为元素绑定点击事件，支持动态添加和移除事件监听器。

const button = document.getElementById('myButton');
button.addEventListener('click', function() {
  alert('按钮被点击了！');
});

通过 onclick 属性直接绑定

直接在 HTML 元素上设置 onclick 属性，或在 JavaScript 中赋值函数。

<button id="myButton" onclick="handleClick()">点击我</button>
<script>
  function handleClick() {
    alert('按钮被点击了！');
  }
</script>

事件委托优化性能

通过事件委托，将事件绑定到父元素，利用事件冒泡处理子元素的事件，适合动态添加的子元素。

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

使用箭头函数简化代码

箭头函数可以简化事件处理函数的写法，但需注意 this 的指向问题。

const button = document.getElementById('myButton');
button.addEventListener('click', () => {
  console.log('箭头函数中的 this:', this); // 注意 this 可能指向全局对象
});

移除点击事件

通过 removeEventListener 移除已绑定的事件监听器，需确保回调函数是同一个引用。

const button = document.getElementById('myButton');
const handleClick = () => alert('点击事件即将被移除');
button.addEventListener('click', handleClick);
button.removeEventListener('click', handleClick);

阻止事件默认行为

调用 event.preventDefault() 可以阻止元素的默认行为（如链接跳转、表单提交）。

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

阻止事件冒泡

调用 event.stopPropagation() 阻止事件冒泡到父元素。

document.querySelector('.child').addEventListener('click', function(event) {
  event.stopPropagation();
  console.log('事件不会冒泡到父元素');
});