文章目录
- 一、在JavaScript中什么是事件？
- 二、什么是JavaScript 常用事件？
- 三、常用JS事件代码示例:
- 四、事件总结
一、在JavaScript中什么是事件？
JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。
二、什么是JavaScript 常用事件？
JavaScript常用事件是指在网页中常用的和与用户交互相关的事件。以下是一些常见的JavaScript事件：
1、点击事件（onclick）：当用户点击某个元素时触发。
2、鼠标移动事件（onmousemove）：当用户在某个元素上移动鼠标时触发。
3、鼠标悬停事件（onmouseover）：当用户将鼠标悬停在某个元素上时触发。
4、键盘按下事件（onkeydown）：当用户按下键盘上的任意键时触发。
5、表单提交事件（onsubmit）：当用户提交表单时触发。
6、页面加载事件（onload）：当网页加载完成时触发。
7、元素失去焦点事件（onblur）：当元素失去焦点时触发。
8、元素获得焦点事件（onfocus）：当元素获得焦点时触发。
三、常用JS事件代码示例:
- 窗口失去焦点和获得焦点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 当鼠标打开页面后,再点击其他文件窗口就会触发焦点事件
onblur :失去焦点
onfocus:获得焦点-->
<script>
<!--当窗口失去焦点时-->
window.onblur=function () {
console.log("窗口失去了焦点！");
}
// 当窗口获得焦点时
window.onfocus=function (){
console.log("窗口获得了焦点！")
}
效果展示:
- 内容发生改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function fun1() {
console.log('内容发生改变')
}
</script>
</head>
<body>
<input type="text" onchange="fun1()" oninput="fun1()">
</body>
</html>
效果展示:
- .窗口加载事件
window.onload=function (){
alert("窗口加载完成!");
}
效果展示:
4.内容改变事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//内容改变事件
function un1()
{
alert(" 内容改变事件")
}
function un2()
{
alert("当文本框内容改变时 ，立即将改变内容 输出在控制台")
}
</script>
</head>
<body>
<form>
账号<input type="text" onchange="un1()"><br>
密码<input type="password" onchange="un2()"><br>
<input type="reset" name="butReset" value="重置按钮">
<input type="submit" name="butSubmit" value="提交按钮">
</form>
</body>
</html>
效果展示:
5.鼠标事件
onclick：鼠标单击时触发此事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function nu()
{
alert("鼠标单击时触发此事件")
}
</script>
</head>
<body>
<input type="button" value="鼠标单击时触发此事件" onclick="nu()">
</body>
</html>
效果展示:
四、事件总结
| 属性 | 说明 |
|---|---|
| submit | 表单提交事件，当用户提交表单时触发。 |
| change | 值改变事件，当表单元素的值发生改变时触发。 |
| blur | 失去焦点事件，当元素失去焦点时触发。 |
| focus | 获取焦点事件，当元素获取焦点时触发。 |
| scroll | 滚动事件，当页面滚动时触发。 |
| resize | 调整窗口大小事件，当调整浏览器窗口大小时触发 |
| keydown | 键盘按下事件，当按下键盘上的任意键时触发。 |
| onclick | 鼠标单击时触发此事件 |
