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

js 给元素添加点击事件的方法

news 2025/7/5 3:14:22

在 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>

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>

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>