JavaScript Dom 绑定事件操作实例详解

什么是事件绑定？

当用户与页面交互时，如鼠标点击、鼠标滑过、键盘输入等操作，页面会自动产生相应的事件。通过 JavaScript 绑定事件，可以在用户进行相关操作时触发特定的 JavaScript 代码，并实现页面与用户的交互。

如何进行事件绑定？

事件绑定可以通过原生 JavaScript 和库/框架两种方式实现。其中，原生 JavaScript 的事件绑定方式广泛被应用，我们主要介绍原生 JavaScript 的事件绑定。

使用 JavaScript 绑定事件的一般格式为：

elementObject.addEventListener(event, function, useCapture);

其中，elementObject 表示需要绑定的 HTML 元素对象。event 表示要触发的事件，如 click、mouseover、keydown 等。function 则为事件触发时所执行的 JavaScript 代码。useCapture 参数表示事件是否在捕获阶段进行处理，默认为 false。

事件绑定示例

点击事件

以下是通过 addEventListener 方法实现点击事件绑定的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击事件绑定示例</title>
</head>
<body>
    <button id="btn">点击我</button>
    <script>
        var btn = document.getElementById('btn');
        btn.addEventListener('click', function() {
            alert('您点击了按钮！');
        });
        // 也可以使用以下方式：
        // btn.onclick = function() {
        //     alert('您点击了按钮！');
        // };
    </script>
</body>
</html>

以上代码中，通过 document.getElementById 获取 button 元素对象，再对该对象通过 addEventListener 方法进行事件绑定。实现点击按钮后触发 alert 弹窗显示 您点击了按钮！ 的效果。

鼠标滑过事件

以下是通过 addEventListener 方法实现鼠标滑过事件绑定的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标滑过事件绑定示例</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: #eee;
        }
        .red {
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        var box = document.getElementById('box');
        box.addEventListener('mouseover', function() {
            box.classList.add('red');
        });
        box.addEventListener('mouseout', function() {
            box.classList.remove('red');
        });
    </script>
</body>
</html>

以上代码中，通过 document.getElementById 获取 div 元素对象 box，并通过 addEventListener 方法分别绑定鼠标滑过和离开事件。当鼠标滑过时，将 red 类添加到 box 元素，从而实现背景色变为红色的效果。当鼠标离开时，将 red 类从 box 元素中移除，实现背景颜色恢复为原来的灰色。