JavaScript之常用的事件

文章目录

前言
为什么使用事件呢?
常用的触发事件
- 窗口事件
- - onblur
  - onfocus
  - onresize
  - 窗口加载事件
- 表单事件
- - onchange
  - oninput
- 键盘事件
- - onkeydown
  - onkeyup
- 鼠标事件
- - onclick
  - ondblclick
  - onmousemove
  - onmouseout
  - onscroll
总结
- 窗口事件总结
- 表单事件总结
- 键盘事件总结
- 鼠标事件总结

前言

在网页中我们可以看到很多效果，本章我们学习一部分常用的事件

为什么使用事件呢?

JavaScript使用事件是为了响应用户的操作和互动。通过事件，可以在特定的情况下触发相应的代码。例如，当用户点击一个按钮时，可以触发一个点击事件，然后执行与该事件相关的代码，比如弹出一个对话框、改变页面的样式等。

事件可以帮助开发者实现与用户交互的功能，使网页更加动态和用户友好。通过使用事件，开发者可以监听并响应用户的操作，比如点击、鼠标移动、键盘输入等，从而改变页面的行为和显示。

除了与用户交互相关的事件，还有许多其他的事件可用于处理其他情况下的操作。例如，可以使用定时器事件定期执行一些代码，或者使用表单提交事件处理表单的数据等。

总而言之，JavaScript使用事件是为了实现网页的交互性和动态性，能够使用户与网页进行实时的互动。

常用的触发事件

窗口事件

onblur

当前元素失去焦点时触发此事件

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*  当窗口失去焦点时 */
		window.onblur = function () {
		/**
		* console 为控制台输出
		* log 为日志
		* 控制台输出日志
		*/
  		console.log('窗口失去了焦点！');
}
    </script>
</head>
<body>

</body>
</html>

运行结果：
在这里插入图片描述

onfocus

当某个元素获得焦点时触发此事件

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /**
         * 当窗口获得焦点时
         */
        window.onfocus = function () {
            console.log('窗口获得了焦点！');
        }
    </script>
</head>
<body>

</body>
</html>

运行结果：

在这里插入图片描述

onresize

当改变浏览器的窗口大小时触发此事件

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    window.onresize = function (){
        console.log("窗口大小发生改变")
    }
  </script>
</head>
<body>

</body>
</html>

运行结果：
在这里插入图片描述

窗口加载事件

窗口加载中就会触发

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    window.onload = function (){
        console.log("窗口加载完毕")
    }
  </script>
</head>
<body>

</body>
</html>

运行结果：
在这里插入图片描述

表单事件

onchange

内容改变事件

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fun1() {
            console.log('内容发生改变')
        }
    </script>
</head>
<body>
<form>
<input type="text" name="aa" onchange="fun1()">
</form>
</body>
</html>

运行结果：
在这里插入图片描述

oninput

当文本框内容改变时，立即将改变内容输出在控制台

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fun1() {
            console.log('内容发生改变')
        }
    </script>
</head>
<body>
<form>
<input type="text" name="aa" oninput="fun1()">
</form>
</body>
</html>

运行结果：
在这里插入图片描述

键盘事件

onkeydown

当键盘上的某个按键被按下时触发此事件

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onkeydown = function () {
            event = event || window.event;
            console.log('键盘按下了' + event.keyCode);
            if (event.keyCode == 13) {
                console.log("按下了回车")
            }
        }
    </script>
</head>
<body>

</body>
</html>

运行结果：
在这里插入图片描述

onkeyup

当键盘上的某个按键被按下后弹起时触发此事件

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onkeydown = function () {
            event = event || window.event;
            console.log('键盘按下了' + event.keyCode);
            if (event.keyCode == 13) {
                console.log("按下了回车")
            }
        }
    </script>
</head>
<body>

</body>
</html>

运行结果：
在这里插入图片描述

鼠标事件

onclick

点击鼠标时触发此事件

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
      window.onclick=function (){
          console.log("鼠标点击")
      }
  </script>
</head>
<body>
</body>
</html>

运行结果：
在这里插入图片描述

ondblclick

双击鼠标时触发此事件

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
       window.ondblclick=function (){
          console.log("鼠标双击")
      }
  </script>
</head>
<body>
</body>
</html>

运行结果：
在这里插入图片描述

onmousemove

鼠标移动时触发此事件

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
      window.onmousemove=function (){
          console.log("鼠标移动触发")
      }
  </script>
</head>
<body>
</body>
</html>

运行结果：

在这里插入图片描述

onmouseout

鼠标从某个设置了此事件的元素上离开时触发此事件

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
      window.onmouseout=function (){
          console.log("鼠标悬浮后离开触发")
      }
  </script>
</head>
<body>
</body>
</html>

运行结果：

在这里插入图片描述

onscroll

当滚动元素的滚动条运行时

代码演示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
      window.onscroll =function (){
          console.log("鼠标滚轮触发")
      }
  </script>
</head>
<body>
<!--此处省阅多条代码-->
</body>
</html>

运行结果：
在这里插入图片描述

总结

窗口事件总结

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

表单事件总结

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

键盘事件总结

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

鼠标事件总结

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