JavaScript中常见的五种事件

有人给我介绍对象吗

已于 2023-12-01 14:35:17 修改

阅读量1.4k

点赞数 21

分类专栏： # JS 文章标签： javascript 开发语言 ecmascript

于 2023-12-01 12:29:51 首次发布

本文链接：https://blog.csdn.net/weixin_50993868/article/details/134730006

版权

JS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

JavaScript中常见的五种事件

JavaScript中常见的五种事件分类：

鼠标事件：与鼠标交互相关的事件，包括点击、双击、鼠标移动、鼠标悬停、鼠标按下和释放等。
键盘事件：与键盘交互相关的事件，包括按键按下、按键释放、键盘输入等。
表单事件：与表单元素交互相关的事件，包括表单提交、表单重置、输入内容改变等。
编辑事件：与文本编辑相关的事件，包括复制、粘贴、剪切、选中文本等。
页面事件：与整个页面相关的事件，包括页面加载完成、页面卸载、窗口大小改变、滚动等。

以下是每个事件分类的一些完整示例：

鼠标事件：

点击事件：click

document.addEventListener('click', function(event) {
    console.log('点击事件触发');
});

双击事件：dblclick

document.addEventListener('dblclick', function(event) {
    console.log('双击事件触发');
});

鼠标移动事件：mousemove

document.addEventListener('mousemove', function(event) {
    console.log('鼠标移动事件触发');
});

鼠标悬停事件：mouseover、mouseout

document.addEventListener('mouseover', function(event) {
    console.log('鼠标悬停事件触发');
});
document.addEventListener('mouseout', function(event) {
    console.log('鼠标离开事件触发');
});

鼠标按下事件：mousedown

document.addEventListener('mousedown', function(event) {
    console.log('鼠标按下事件触发');
});

鼠标释放事件：mouseup

document.addEventListener('mouseup', function(event) {
    console.log('鼠标释放事件触发');
});

键盘事件：

按键按下事件：keydown

document.addEventListener('keydown', function(event) {
    console.log('按键按下事件触发');
});

按键释放事件：keyup

document.addEventListener('keyup', function(event) {
    console.log('按键释放事件触发');
});

输入事件：input

document.addEventListener('input', function(event) {
    console.log('输入事件触发');
});

表单事件：

表单提交事件：submit

document.addEventListener('submit', function(event) {
    console.log('表单提交事件触发');
    event.preventDefault(); // 阻止表单提交
});

表单重置事件：reset

document.addEventListener('reset', function(event) {
    console.log('表单重置事件触发');
});

输入内容改变事件：change

document.addEventListener('change', function(event) {
    console.log('输入内容改变事件触发');
});

编辑事件：

复制事件：copy

document.addEventListener('copy', function(event) {
    console.log('复制事件触发');
});

粘贴事件：paste

document.addEventListener('paste', function(event) {
    console.log('粘贴事件触发');
});

剪切事件：cut

document.addEventListener('cut', function(event) {
    console.log('剪切事件触发');
});

选中文本事件：select

document.addEventListener('select', function(event) {
    console.log('选中文本事件触发');
});

页面事件：

页面加载完成事件：load

window.addEventListener('load', function(event) {
    console.log('页面加载完成事件触发');
});

页面卸载事件：beforeunload

window.addEventListener('beforeunload', function(event) {
    console.log('页面卸载事件触发');
});

窗口大小改变事件：resize

window.addEventListener('resize', function(event) {
    console.log('窗口大小改变事件触发');
});

滚动事件：scroll

window.addEventListener('scroll', function(event) {
    console.log('滚动事件触发');
});

这些是JavaScript中常见事件的完整示例。你可以通过添加事件监听器来处理这些事件，并在事件发生时执行相应的操作。

以下是一个详细完整的示例，结合了JavaScript、HTML和CSS，展示了如何在网页中使用事件处理函数来实现交互效果.

HTML部分：

<!DOCTYPE html>
<html>
<head>
  <title>JavaScript事件示例</title>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: red;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }
    .box:hover {
      background-color: blue;
    }
  </style>
</head>
<body>
  <div class="box" id="myBox"></div>

  <script src="script.js"></script>
</body>
</html>

CSS部分定义了一个名为.box的CSS类，设置了一个红色的正方形盒子，并为其添加了鼠标悬停效果。

JavaScript部分（script.js）：

// 获取盒子元素
var box = document.getElementById('myBox');

// 鼠标点击事件处理函数
function handleClick() {
  box.style.backgroundColor = 'green';
}

// 鼠标悬停事件处理函数
function handleMouseOver() {
  box.style.transform = 'scale(1.2)';
}

// 鼠标离开事件处理函数
function handleMouseOut() {
  box.style.transform = 'scale(1)';
}

// 为盒子元素添加事件监听器
box.addEventListener('click', handleClick);
box.addEventListener('mouseover', handleMouseOver);
box.addEventListener('mouseout', handleMouseOut);

JavaScript部分定义了三个事件处理函数：handleClick处理鼠标点击事件，将盒子的背景颜色改为绿色；handleMouseOver处理鼠标悬停事件，将盒子放大；handleMouseOut处理鼠标离开事件，将盒子恢复原始大小。

通过getElementById方法获取HTML中的盒子元素，并使用addEventListener方法为该元素添加事件监听器。

当点击盒子时，handleClick函数被调用，当鼠标悬停在盒子上时，handleMouseOver函数被调用，当鼠标离开盒子时，handleMouseOut函数被调用。

这个示例展示了如何使用JavaScript来处理鼠标事件，并通过改变CSS样式实现交互效果。

有人给我介绍对象吗

关注

21
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
JavaScript中常见的五种事件

鼠标事件：与鼠标交互相关的事件，包括点击、双击、鼠标移动、鼠标悬停、鼠标按下和释放等。页面事件：与整个页面相关的事件，包括页面加载完成、页面卸载、窗口大小改变、滚动等。表单事件：与表单元素交互相关的事件，包括表单提交、表单重置、输入内容改变等。键盘事件：与键盘交互相关的事件，包括按键按下、按键释放、键盘输入等。编辑事件：与文本编辑相关的事件，包括复制、粘贴、剪切、选中文本等。的CSS类，设置了一个红色的正方形盒子，并为其添加了鼠标悬停效果。处理鼠标点击事件，将盒子的背景颜色改为绿色；
复制链接

扫一扫

专栏目录