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>

运行结果:
JavaScript之常用的事件_第1张图片

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>

运行结果:

JavaScript之常用的事件_第2张图片

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>

运行结果:
JavaScript之常用的事件_第3张图片

窗口加载事件

窗口加载中就会触发

代码演示:

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

</body>
</html>

运行结果:
JavaScript之常用的事件_第4张图片

表单事件

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>

运行结果:
JavaScript之常用的事件_第5张图片

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>

运行结果:
JavaScript之常用的事件_第6张图片

键盘事件

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>

运行结果:
JavaScript之常用的事件_第7张图片

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>

运行结果:
JavaScript之常用的事件_第8张图片

鼠标事件

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>

运行结果:
JavaScript之常用的事件_第9张图片

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>

运行结果:
JavaScript之常用的事件_第10张图片

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>

运行结果:

JavaScript之常用的事件_第11张图片

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>

运行结果:

JavaScript之常用的事件_第12张图片

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>

运行结果:
JavaScript之常用的事件_第13张图片

总结

窗口事件总结

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

表单事件总结

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

键盘事件总结

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

鼠标事件总结

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

你可能感兴趣的:(javascript,开发语言,ecmascript)