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('事件不会冒泡到父元素');
});
