当前位置：首页 > news >正文

js添加点击监控事件的方式

news 2025/8/22 13:42:45

在 JavaScript 里，为元素添加点击监控事件是很常见的操作，以下为你详细介绍几种不同的实现方式。

1. 内联事件处理程序

这是一种较为简单直接的方式，直接在 HTML 标签里添加 onclick 属性来定义点击事件处理函数。

示例代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>内联事件处理程序</title>
</head><body><button onclick="handleClick()">点击我</button><script>function handleClick() {alert('你点击了按钮！');}</script>
</body></html>

代码解释

在 <button> 标签里添加了 onclick="handleClick()" 属性，当按钮被点击时，就会调用 handleClick() 函数。
handleClick() 函数在 <script> 标签里定义，其功能是弹出一个提示框。

2. DOM0 级事件处理程序

通过 JavaScript 代码获取元素，然后为元素的 onclick 属性赋值一个函数。

示例代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM0 级事件处理程序</title>
</head><body><button id="myButton">点击我</button><script>const button = document.getElementById('myButton');button.onclick = function () {alert('你点击了按钮！');};</script>
</body></html>

代码解释

运用 document.getElementById('myButton') 方法获取按钮元素。
把一个匿名函数赋值给按钮元素的 onclick 属性，当按钮被点击时，这个匿名函数就会被执行。

3. DOM2 级事件处理程序

使用 addEventListener() 方法为元素添加事件监听器，这是比较推荐的方式，因为它支持为同一个元素的同一个事件添加多个监听器。

示例代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>DOM2 级事件处理程序</title>
</head><body><button id="myButton">点击我</button><script>const button = document.getElementById('myButton');button.addEventListener('click', function () {alert('你点击了按钮！');});</script>
</body></html>

代码解释

借助 document.getElementById('myButton') 方法获取按钮元素。
调用按钮元素的 addEventListener() 方法，第一个参数是事件类型（这里是 'click'），第二个参数是事件处理函数，当按钮被点击时，这个函数就会被执行。

4. jQuery 方式

如果项目中使用了 jQuery 库，也可以使用 jQuery 的 click() 方法来添加点击事件监听器。

示例代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery 方式</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head><body><button id="myButton">点击我</button><script>$('#myButton').click(function () {alert('你点击了按钮！');});</script>
</body></html>