addEventListener 第一参数 介绍

在 addEventListener 方法中，第一个参数是用于指定要监听的事件类型。这个参数是一个字符串，它代表了浏览器中各种不同类型的事件。下面为你详细介绍常见的事件类型分类及具体示例：

1. 鼠标事件

这类事件与鼠标的操作相关，例如点击、移动等。

click

当用户点击元素时触发。

<!DOCTYPE html>
<html lang="en">

<body>
    <button id="myButton">点击我</button>
    <script>
        const button = document.getElementById('myButton');
        button.addEventListener('click', function () {
            console.log('按钮被点击了');
        });
    </script>
</body>

</html>

mousedown

当鼠标指针在元素上按下时触发。

<!DOCTYPE html>
<html lang="en">

<body>
    <div id="myDiv" style="width: 100px; height: 100px; background-color: blue;"></div>
    <script>
        const div = document.getElementById('myDiv');
        div.addEventListener('mousedown', function () {
            console.log('鼠标在 div 上按下');
        });
    </script>
</body>

</html>

mouseup

当鼠标指针在元素上释放时触发。

<!DOCTYPE html>
<html lang="en">

<body>
    <div id="myDiv" style="width: 100px; height: 100px; background-color: green;"></div>
    <script>
        const div = document.getElementById('myDiv');
        div.addEventListener('mouseup', function () {
            console.log('鼠标在 div 上释放');
        });
    </script>
</body>

</html>

mousemove

当鼠标指针在元素上移动时持续触发。

<!DOCTYPE html>
<html lang="en">

<body>
    <div id="myDiv" style="width: 100px; height: 100px; background-color: yellow;"></div>
    <script>
        const div = document.getElementById('myDiv');
        div.addEventListener('mousemove', function () {
            console.log('鼠标在 div 上移动');
        });
    </script>
</body>

</html>

2. 键盘事件

这类事件与键盘的操作相关，例如按键按下、释放等。

keydown

当用户按下键盘上的任意键时触发。

<!DOCTYPE html>
<html lang="en">

<body>
    <input type="text" id="myInput">
    <script>
        const input = document.getElementById('myInput');
        input.addEventListener('keydown', function (event) {
            console.log(`按下了键: ${event.key}`);
        });
    </script>
</body>

</html>

keyup

当用户释放键盘上的任意键时触发。

<!DOCTYPE html>
<html lang="en">

<body>
    <input type="text" id="myInput">
    <script>
        const input = document.getElementById('myInput');
        input.addEventListener('keyup', function (event) {
            console.log(`释放了键: ${event.key}`);
        });
    </script>
</body>

</html>

3. 表单事件

这类事件与表单元素的操作相关，例如表单提交、输入框内容改变等。

submit

当表单被提交时触发，通常用于 <form> 元素。

<!DOCTYPE html>
<html lang="en">

<body>
    <form id="myForm">
        <input type="text" name="username">
        <input type="submit" value="提交">
    </form>
    <script>
        const form = document.getElementById('myForm');
        form.addEventListener('submit', function (event) {
            event.preventDefault();
            console.log('表单已提交');
        });
    </script>
</body>

</html>

input

当输入框（如 <input>、<textarea>）的内容发生改变时触发。

<!DOCTYPE html>
<html lang="en">

<body>
    <input type="text" id="myInput">
    <script>
        const input = document.getElementById('myInput');
        input.addEventListener('input', function () {
            console.log('输入框内容已改变');
        });
    </script>
</body>

</html>

4. 窗口事件

这类事件与浏览器窗口的操作相关，例如窗口大小改变、页面加载完成等。

resize

当浏览器窗口的大小发生改变时触发。

<!DOCTYPE html>
<html lang="en">

<body>
    <script>
        window.addEventListener('resize', function () {
            console.log('窗口大小已改变');
        });
    </script>
</body>

</html>

load

当整个页面（包括所有资源，如图片、脚本等）加载完成时触发。

<!DOCTYPE html>
<html lang="en">

<body>
    <script>
        window.addEventListener('load', function () {
            console.log('页面已完全加载');
        });
    </script>
</body>

</html>

DOMContentLoaded

当 HTML 文档被完全加载和解析完成，不等待样式表、图片等资源加载完成时触发。

<!DOCTYPE html>
<html lang="en">

<body>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            console.log('HTML 文档已加载解析完成');
        });
    </script>
</body>

</html>

以上只是 addEventListener 第一个参数可以指定的部分常见事件类型，实际上还有很多其他类型的事件，如触摸事件、动画事件等，可以根据具体的需求进行监听。

posted @ 2025-02-14 11:05  徒步阳光855  阅读(31)  评论(0)    收藏  举报