JavaScript之常用的事件

发布时间：2023年12月28日

文章目录

前言

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

为什么使用事件呢?

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当鼠标的滚轮运行时
文章来源:https://blog.csdn.net/weixin_72473547/article/details/135261114
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
最新文章