js 实现点击
实现点击事件的 JavaScript 方法
使用 addEventListener 绑定点击事件
通过 addEventListener 可以为元素添加点击事件监听器，这是现代 JavaScript 推荐的方式。
document.getElementById('myButton').addEventListener('click', function() {
alert('按钮被点击了！');
});直接使用 onclick 属性
可以在 HTML 元素中直接设置 onclick 属性，或在 JavaScript 中动态赋值。
// HTML 中
<button onclick="handleClick()">点击我</button>
// JavaScript 中
document.getElementById('myButton').onclick = function() {
console.log('点击事件触发');
};事件委托
对于动态生成的元素或大量子元素，使用事件委托可以提高性能。
document.addEventListener('click', function(event) {
if (event.target.classList.contains('clickable')) {
event.target.style.backgroundColor = 'yellow';
}
});阻止默认行为或冒泡
通过 event.preventDefault() 或 event.stopPropagation() 控制事件行为。
document.getElementById('link').addEventListener('click', function(event) {
event.preventDefault();
console.log('链接点击被阻止');
});兼容性处理
针对旧版浏览器（如 IE8），可以使用 attachEvent 作为备选方案。
var button = document.getElementById('oldButton');
if (button.attachEvent) {
button.attachEvent('onclick', function() {
alert('兼容模式下的点击');
});
}实际应用示例
动态按钮点击计数
let count = 0;
document.getElementById('counter').addEventListener('click', function() {
count++;
this.textContent = `点击次数: ${count}`;
});注意事项
- 避免混合使用
addEventListener和onclick，可能导致事件覆盖。 - 事件委托时需检查
event.target是否符合预期条件。 - 移除事件监听使用
removeEventListener，需传入相同的函数引用。
