JavaScript--常用事件

🕗 发布于 2025-01-19 10:05 javascript 开发语言 网络安全 学习笔记

一.事件概念

介绍：JavaScript 事件是在浏览器中发生的动作，例如用户点击按钮、页面加载完成、鼠标移动、键盘输入等，这些事件可以被 JavaScript 代码捕获并执行相应的操作。

二.事件处理程序

1.事件的基本使用

使用方式：<html各种标签属性 on事件名称="JS代码（事件处理程序）" />

具体示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件的基本使用</title>
</head>
<body>
<input type="button" value="button" onclick="alert('hello world');">
</body>
</html>

PS：直接在 HTML 标签中编写 JS 代码，此方式功能上正常，但是代码的可读性较差。

2.使用函数作为事件处理程序

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title>函数作为事件处理程序</title>
 <script type="text/javascript">
 function hello(){
 alert("hello world");
}
</script>
</head>
<body>
<input type="button" value="button" onclick="hello()">
</body>
</html>

PS：先定义一个函数，然后在HTML标签中对其进行引用。

三.常用事件

1.页面事件

A.onload事件

介绍：当页面的所有资源，包括 HTML 文档、CSS 样式表、JavaScript 脚本、图片等都已完全加载并解析完成后触发。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onload事件</title>
</head>
<body>
  <script>
    window.onload = function () {
      // 页面加载完成后弹出提示框
      alert('页面已加载完成');
    };
  </script>
</body>
</html>

B.onresize事件

介绍：当浏览器窗口的大小发生改变时触发，无论是用户手动调整窗口大小，还是通过代码改变窗口尺寸，都会触发该事件。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onresize事件</title>
</head>
<body>
    <script>
      window.onresize = function () {
        // 获取当前窗口宽度
        var windowWidth = window.innerWidth;
        // 获取当前窗口高度
        var windowHeight = window.innerHeight;
        console.log('窗口大小改变：宽度为 ' + windowWidth + 'px，高度为 ' + windowHeight + 'px');
      };
    </script>
</body>
</html>

2.焦点事件

A.onfocus 事件（获取焦点）

介绍：当一个元素（通常是表单元素，如文本框、输入框、文本区域等）获得焦点时触发。
示例：
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onfocus事件</title>
</head>
<body>
<input type="text" id="myInput" value="请输入内容">
<script>
var input = document.getElementById('myInput');
input.onfocus = function() {
// 当元素获得焦点时，清空文本框并改变边框颜色
this.value = '';
this.style.border = '2px solid blue';
};
</script>
</body>
</html>
```
- 在上述代码中，当用户将焦点放到 id 为 myInput 的输入框时：
  - 首先，使用 document.getElementById('myInput') 获取输入框元素。
  - 然后，当该元素获得焦点时，触发 onfocus 事件，调用对应的函数。
  - 在函数中，将输入框的值清空（this.value = '';），并将边框设置为 2px 宽的蓝色边框（this.style.border = '2px solid blue';）。

B.onblur事件（失去焦点）

介绍：当一个元素失去焦点时触发，也就是用户将焦点从该元素移到其他元素上时。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onblur事件</title>
</head>
<body>
<input type="text" id="myInput" value="请输入内容">
<script>
    var input = document.getElementById('myInput');
    input.onblur = function() {
      // 当元素失去焦点时，检查输入是否为空
      if (this.value === '') {
        this.value = '请输入内容';
        this.style.border = '1px solid #ccc';
      } else {
        this.style.border = '1px solid green';
      }
    };
  </script>
</body>
</html>

在上述代码中，当用户将焦点从 id 为 myInput 的输入框移开时：
- 同样先通过 document.getElementById('myInput') 获取元素。
- 当该元素失去焦点时，触发 onblur 事件，调用相应函数。
- 函数中检查输入框的值是否为空，如果为空，则将其值重置为请输入内容，并将边框设置为 1px 宽的灰色边框（1px solid #ccc）；如果不为空，则将边框设置为 1px 宽的绿色边框（1px solid green）。

3.点击事件

A.onclick 单击事件

介绍：当用户在元素上按下并释放鼠标左键时触发。此事件可以绑定到各种 HTML 元素上，包括但不限于按钮（<button>）、<div>、<p>、<span>、<a> 等。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onclick事件</title>
</head>
<body>
<div id="myDiv">点击我</div>
  <script>
    var div = document.getElementById('myDiv');
    div.onclick = function() {
      // 当用户点击 div 元素时，改变元素的背景颜色
      this.style.backgroundColor = 'yellow';
    };
  </script>
</body>
</html>

在上述代码中：
- 使用 document.getElementById('myDiv') 获取 id 为 myDiv 的 <div> 元素。
- 当用户点击该元素时，触发 onclick 事件，调用对应的函数。
- 函数中使用 this.style.backgroundColor = 'yellow'; 将元素的背景颜色更改为黄色。

B.ondblclick 双击事件

介绍：当用户在元素上快速连续点击两次鼠标左键时触发。与 onclick 类似，也可以绑定到多种 HTML 元素上。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ondblclick事件</title>
</head>
<body>
<div id="myDiv">双击我</div>
  <script>
    var div = document.getElementById('myDiv');
    div.ondblclick = function() {
      // 当用户双击 div 元素时，显示一个提示信息
      alert('你双击了这个元素');
    };
  </script>
</body>
</html>

在上述代码中：
- 当用户双击 id 为 myDiv 的 <div> 元素时，会触发 ondblclick 事件，显示一个提示信息。

4.鼠标事件

A.onmouseover 事件（鼠标滑入）

介绍：当鼠标指针移入元素的可见区域时触发。该事件可应用于几乎所有的 HTML 元素，包括但不限于 <div>、<span>、<button>、<img> 等。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onmouseover事件</title>
</head>
<body>
  <div id="myDiv" style="width: 100px; height: 100px; background-color: red;">鼠标移到我上面</div>
  <script>
    var div = document.getElementById('myDiv');
    div.onmouseover = function() {
      this.style.backgroundColor = 'blue';
    };
  </script>
</body>
</html>
<!DOCTYPE html>

PS：当鼠标移入 id 为 myDiv 的 <div> 元素时，其背景颜色将从红色变为蓝色。

B.onmouseout 事件（鼠标滑出）

介绍：当鼠标指针移出元素的可见区域时触发。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onmouseout事件</title>
</head>
<body>
  <div id="myDiv" style="width: 100px; height: 100px; background-color: red;">鼠标移到我上面</div>
  <script>
    var div = document.getElementById('myDiv');
    div.onmouseover = function() {
this.style.backgroundColor = 'blue';
    };
div.onmouseout = function() {
this.style.backgroundColor = 'red';
}
  </script>
</body>
</html>
<!DOCTYPE html>

PS：与 onmouseover 配合使用，当鼠标移出 id 为 myDiv 的 <div> 元素时，其背景颜色将从蓝色恢复为红色。

C.onmousedown 事件（鼠标按下）

介绍：当用户在元素上按下鼠标按钮（通常是左键）时触发。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onmousedown事件</title>
</head>
<body>
    <div id="myDiv" style="width: 100px; height: 100px; background-color: red;">点击我</div>
    <script>
      var div = document.getElementById('myDiv');
      div.onmousedown = function() {
        this.style.backgroundColor = 'green';
      };
    </script>
</body>
</html>
<!DOCTYPE html>

PS：当用户将鼠标按钮在 id 为 myDiv 的 <div> 元素上按下时，其背景颜色将变为绿色。

D.onmouseup 事件（鼠标抬起）

介绍：当用户释放鼠标按钮（通常是左键）时触发。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onmouseup事件</title>
</head>
<body>
  <div id="myDiv" style="width: 100px; height: 100px; background-color: red;">点击我</div>
  <script>
    var div = document.getElementById('myDiv');
    div.onmousedown = function() {
      this.style.backgroundColor = 'green';
    };
    div.onmouseup = function() {
      this.style.backgroundColor = 'red';
    };
  </script>
</body>
</html>

PS：与 onmousedown 配合使用，当用户将鼠标按钮从 id 为 myDiv 的 <div> 元素上释放时，其背景颜色将从绿色恢复为红色。

E.onmousemove 事件（鼠标滑动）

介绍：当鼠标指针在元素上移动时触发。这个事件会频繁触发，因此在处理该事件时要注意性能优化，避免过多的计算和操作。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>onmousemove事件</title>
</head>
<body>
  <div id="myDiv" style="width: 100px; height: 100px; background-color: red;"></div>
  <script>
    var div = document.getElementById('myDiv');
    div.onmousemove = function(event) {
      console.log('鼠标位置：X=' + event.clientX + ', Y=' + event.clientY);
    };
  </script>
</body>
</html>

PS：当鼠标在 id 为 myDiv 的 <div> 元素上移动时，会在控制台打印出鼠标指针的当前位置（event.clientX 和 event.clientY）。

原文地址：https://blog.csdn.net/qq_37107430/article/details/145220731

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：YOLOv8改进，YOLOv8检测头融合RepConv卷积，并添加小目标检测层（四头检测），适合目标检测、分割等
下一篇：SVG To Font 创建自己的字体图标库

antd + VUE循环form-item的校验循环校验（多层循环）
使用a-form循环校验:v-model动态渲染的，主要是name跟v-model绑定的数据需要是一样的，校验才会生效，:name="['deviceModels',index,'paren
阅读更多2025-01-20
三十二、服务应用操作
ini文件是Initialization File 的缩写，即初始化文件，是Windows的系统配置文件所采用的存储格式。文件扩展名：配置文件名称.ini。比如项目中的配置文件是整个项目共用的。例如，
阅读更多2025-01-20
【MySQL】MySQL用户管理
MySQL中的用户，都存储在系统数据库mysql的user表中。如果用户存在，赋予权限的同时修改密码,如果该用户不存在，就是创建用户。host：表示这个用户可以从哪个主机登陆，如果是localhos
阅读更多2025-01-20
【软件测试】用例篇
【软件测试】用例篇
阅读更多2025-01-20
嵌入式知识点总结(二)-C/C++ 内存
嵌入式知识点总结(二)-C/C++内存
阅读更多2025-01-20
Spring Boot 整合 Knife4j：打造更优雅的 API 文档
在现代 Web 应用开发中，API 文档的重要性不言而喻。清晰、准确、易用的 API 文档不仅可以方便开发者理解和使用 API，还能提高团队协作效率。Knife4j 是一个基于 Swagger 的增强
阅读更多2025-01-20
linux中的docker下载镜像
重新加在文件，重启docker。
阅读更多2025-01-20
x86_64搭建ARM交叉编译工具链
>>交叉编译器中“交叉”的意思就是在一个架构上编译另外一个架构的代码，相当于两种架构“交叉”起来了。交叉编译器有很多种，我们使用Linaro出品的交叉编译器，Linaro一间非营利性质的开
阅读更多2025-01-20
elasticsearch基础
elasticsearch是一款非常强大的开源搜索引擎，具备非常多强大功能，可以帮助我们从海量数据中快速找到需要的内容例如：在github搜索代码：在电商网站搜索商品：在百度搜索答案：在打车软件搜索附
阅读更多2025-01-20
Linux中的页缓存机制
PageCache，又称pcache，中文名称为页高速缓冲存储器，简称页高缓。它是将磁盘上的数据加载到内存中，当系统需要访问这些数据时，可以直接从内存中读取，而不必每次都去读取磁盘。这种方式显著减少了
阅读更多2025-01-20