当前位置：首页 > JavaScript

js实现点击

2026-04-05 13:25:58JavaScript

JavaScript 实现点击事件的方法

方法一：使用 onclick 属性

在 HTML 元素中直接添加 onclick 属性，指定 JavaScript 代码或函数。

<button onclick="alert('按钮被点击了')">点击我</button>

方法二：使用 addEventListener

通过 JavaScript 获取 DOM 元素并添加事件监听器。

document.getElementById('myButton').addEventListener('click', function() {
    console.log('按钮被点击了');
});

方法三：事件委托

通过父元素监听子元素的点击事件，适用于动态添加的元素。

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

注意事项

性能优化
避免在循环中频繁添加事件监听器，使用事件委托可以减少内存占用。
兼容性
addEventListener 不支持 IE8 及以下版本，如需兼容可使用 attachEvent。
阻止默认行为
使用 event.preventDefault() 可以阻止元素的默认行为（如链接跳转）。

document.querySelector('a').addEventListener('click', function(event) {
    event.preventDefault();
    console.log('链接点击被阻止');
});

示例代码

HTML 结构

<button id="myButton">点击我</button>
<div id="parent">
    <div class="child">子元素 1</div>
    <div class="child">子元素 2</div>
</div>

JavaScript 代码

// 方法二示例
document.getElementById('myButton').addEventListener('click', function() {
    alert('按钮被点击了');
});

// 方法三示例
document.getElementById('parent').addEventListener('click', function(event) {
    if (event.target.matches('.child')) {
        console.log('子元素被点击:', event.target.textContent);
    }
});