js常用事件演示

最新推荐文章于 2024-09-13 23:32:49 发布

Bi8bo

最新推荐文章于 2024-09-13 23:32:49 发布

阅读量867

点赞数 24

文章标签：前端 javascript

本文链接：https://blog.csdn.net/2302_77874940/article/details/135330780

版权

本文详细阐述了JavaScript事件的概念，它们在用户交互中的作用，以及各种常见的事件类型如点击、双击、键盘和鼠标事件。通过实例展示了如何在HTML中实现这些事件的监听和响应。

摘要由CSDN通过智能技术生成

概述：

JavaScript事件是用户或浏览器自身执行的某种行为或操作，例如点击鼠标、键盘输入等，这些行为都可以被JavaScript侦测并触发相应的事件处理机制。同时值得注意的是，事件并不是JavaScript独有的，大多数编程语言都有某种事件模型，其工作方式可能与JavaScript有所不同。

为什么要用JS事件？

使用事件的主要作用包括：

各个元素之间可以借助事件来进行交互，使页面更加动态和有趣。
用户和页面之间也可以通过事件来交互，提高用户体验。例如，当用户点击一个按钮时，可以使用事件来触发某些功能或操作。
后端和页面之间也可以通过事件来交互，这样可以减少服务器的压力。例如，当用户提交表单时，可以使用事件将数据发送到服务器。
JavaScript事件使我们有能力去创建动态页面，事件就是可以被js侦测到的行为。简单理解就是用户操作鼠标或者键盘后，触发了js事件，然后产生对应的机制。

在JavaScript中，有几种常见的事件类型，包括：

加载事件：当页面完全加载时触发。
卸载事件：当页面从浏览器缓存中卸载时触发。
更改事件：当元素的文本或属性值发生变化时触发。
点击事件：当用户点击元素时触发。
焦点事件：当元素获得或失去焦点时触发。
键盘事件：当用户按下或释放键盘上的键时触发。
鼠标事件：当用户移动鼠标指针时触发。
提交事件：当表单提交时触发。

以下是一些常用的JavaScript事件及其代码演示：

click事件：当用户点击一个元素时触发。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>click事件示例</title>
<script>
function showMessage() {
  alert("你点击了按钮！");
}
</script>
</head>
<body>

<button onclick="showMessage()">点击我</button>

</body>
</html>

dblclick事件：当用户双击一个元素时触发。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dblclick事件示例</title>
<script>
function showMessage() {
  alert("你双击了按钮！");
}
</script>
</head>
<body>

<button ondblclick="showMessage()">双击我</button>

</body>
</html>

mousedown事件：当用户按下鼠标按钮时触发。

html
复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mousedown事件示例</title>
<script>
function showMessage() {
  alert("你按下了鼠标按钮！");
}
</script>
</head>
<body>

<button onmousedown="showMessage()">按下鼠标按钮</button>

</body>
</html>

mouseup事件：当用户抬起鼠标按钮时触发。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mouseup事件示例</title>
<script>
function showMessage() {
  alert("你抬起了鼠标按钮！");
}
</script>
</head>
<body>

<button onmouseup="showMessage()">抬起鼠标按钮</button>

</body>
</html>

mousemove事件：当鼠标在元素上移动时触发

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mousemove事件示例</title>
<script>
function showMessage(event) {
  alert("鼠标位置：X = " + event.clientX + ", Y = " + event.clientY);
}
</script>
</head>
<body>

<div style="width: 300px; height: 200px; background-color: lightblue;" onmousemove="showMessage(event)"></div>

</body>
</html>

mouseover事件：当鼠标悬停在元素上时触发。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mouseover事件示例</title>
<script>
function showMessage() {
  alert("鼠标悬停在按钮上！");
}
</script>
</head>
<body>

<button onmouseover="showMessage()">悬停在我上面</button>

</body>
</html>

mouseout事件：当鼠标离开元素时触发。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>mouseout事件示例</title>
<script>
function showMessage() {
  alert("鼠标离开了按钮！");
}
</script>
</head>
<body>

<button onmouseout="showMessage()">离开我</button>

</body>
</html>

keydown事件：当用户按下键盘上的键时触发。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>keydown事件示例</title>
<script>
function showMessage(event) {
  alert("你按下了键：" + event.key);
}
</script>
</head>
<body>

<input type="text" onkeydown="showMessage(event)">

</body>
</html>

keyup事件：当用户抬起键盘上的键时触发。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>keyup事件示例</title>
<script>
function showMessage(event) {
  alert("你抬起了键：" + event.key);
}
</script>
</head>
<body>

<input type="text" onkeyup="showMessage(event)">

</body>
</html>

以上示例就是JS常用的事件如有不足请看总结。

事件总结：

1.窗口事件：

关键单词	作用
onblur	失去焦点
onfocus	获得焦点
onload	窗口加载事件
onresize	窗口大小缩放事件

2.表单事件：

关键单词	作用
onchange	内容改变事件
oninput	当文本框内容改变时，立即将改变内容输出在控制台
oninvalid	获取表单未能提交时
onselect	当文本框内容被选中时
onsubmit	为表单绑定提交事件

3.键盘事件：

关键单词	作用
onkeydown	当键盘上的某个按键被按下时触发此事件
onkeyup	当键盘上的某个按键被按下后弹起时触发此事件
onkeypress	当输入有效的字符按键时触发此事件

4.鼠标事件：

关键单词	作用
onclick	鼠标单击时触发此事件
ondblclick	鼠标双击时触发此事件
onmousedown	鼠标按下时触发此事件
onmouseup	鼠标弹起时触发的事件
onmouseover	鼠标移动到某个设置了此事件的元素上时触发此事件
onmousemove	鼠标移动时触发此事件
onmouseout	鼠标从某个设置了此事件的元素上离开时触发此事件
onscroll	当滚动元素的滚动条运行时
onmousewheel	当鼠标的滚轮运行时