JavaScript常用事件演示

文章目录

一、在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	鼠标单击时触发此事件