2025.4.22学习日记 JavaScript的常用事件

news2026/2/12 17:37:45

在 JavaScript 里，事件是在文档或者浏览器窗口中发生的特定交互瞬间，例如点击按钮、页面加载完成等等。下面是一些常用的事件以及案例：

1. `click` 事件

当用户点击元素时触发

const button = document.createElement('button');
button.textContent = '点击我';
document.body.appendChild(button);

button.addEventListener('click', function() {
    alert('按钮被点击了！');
});

2. `mouseover` 事件

当鼠标指针移动到元素上方时触发。

const box = document.createElement('div');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'blue';
document.body.appendChild(box);

box.addEventListener('mouseover', function() {
    this.style.backgroundColor = 'red';
});

3. `mouseout` 事件

当鼠标指针移出元素时触发。

const box = document.createElement('div');
box.style.width = '100px';
box.style.height = '100px';
box.style.backgroundColor = 'blue';
document.body.appendChild(box);

box.addEventListener('mouseout', function() {
    this.style.backgroundColor = 'green';
});

4. `keydown` 事件

当用户按下键盘上的某个键时触发。

document.addEventListener('keydown', function(event) {
    console.log(`你按下了 ${event.key} 键`);
});

5. `load` 事件

当页面或图像等资源加载完成时触发。

<body>
    <img id="myImage" src="https://picsum.photos/200/300" alt="示例图片">
    <script>
        const image = document.getElementById('myImage');
        image.addEventListener('load', function() {
            console.log('图片加载完成');
        });
    </script>
</body>

6. `submit` 事件

当表单提交时触发。

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2340549.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！