JavaScript常见事件的使用

不必再谢

已于 2023-12-30 10:18:45 修改

阅读量422

点赞数 10

文章标签： javascript 开发语言

于 2023-12-30 10:17:44 首次发布

本文链接：https://blog.csdn.net/nlfc47/article/details/135273098

版权

文章目录

JavaScript的事件

JavaScript的事件

原理:

当我们在某个元素上添加一个事件时，根据事件执行的前后可以把它当成一个事件流，例如在DOM事件中规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收到事件，最后是冒泡阶段，可以在这个阶段对事件做出响应。

事件主要分类

窗口事件
鼠标事件
键盘事件
表单事件

窗口事件

onblur：失去焦点

onfocus :获得焦点

/*  当窗口失去焦点时 */
    window.onblur = function () {
        console.log('窗口失去了焦点！');
    }
    /*  当窗口获得焦点时 */
    window.onfocus = function () {
        console.log('窗口获得了焦点！');

结果:
在这里插入图片描述

onload : 窗口加载事件

onresize：窗口大小改变事件

	/* 窗口加载完成后*/
		window.onload =function () {
		    console.log("窗口加载完成！")
		}
		/*  窗口大小改变时 事件 */
		window.onresize = function () {
		    console.log("窗口大小正在发送生改变");
		}

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

鼠标事件

就是只能是鼠标触发的事件

onclick：鼠标单击时触发此事件

ondblclick：鼠标双击时触发此事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
    <!---点击按钮显示其效果-->
    window.onclick=function (){
      console.log('被单击');
    }

    function dbClick(){
      console.log('被双击')
    }
  </script>
</head>
<body>
<input type="button" value="双击" ondblclick="dbClick()"><!--双击其按钮显示效果-->
</body>
</html>

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

onmousedown：鼠标按下时触发此事件

onmouseup：鼠标弹起时触发的事件

<!--鼠标按下-->
    window.onmousedown = function () {
      console.log("当鼠标按钮按下运行时");
    }
    <!---鼠标按下后收手-->
    window.onmouseup = function () {
      console.log("当鼠标按钮运行时");
    }

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

onmouseover：鼠标移动到某个设置了此事件的元素上时触发此事件
onmousemove：鼠标移动时触发此事件

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script type="text/javascript">
  <!---移动到div上面就显示悬浮-->
    function mouseover() {
      console.log("鼠标悬浮");
    }
 <!---移动到div上面就显示移动到div-->
    function mousemove () {
      console.log("鼠标移动到页面");
    }
     <!---移出到div上面就显示移出-->
    function mouseout(){
      console.log('鼠标移出页面')
    }
  </script>
</head>
<body>
<div style="height: 200px;width: 200px;background-color: green" onmouseover="mouseover()" onmousemove="mousemove()" onmouseout="mouseout()"></div>
</body>
</html>

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

onscroll:当鼠标的滚轮运行时

 window.onscroll=function (){
            console.log('滚条在移动中')
        }

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

键盘事件

键盘事件是指用户在使用键盘时触发的事件。例如，按左右键实现定义方块的左右移动。

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

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

onkeypress：当输入有效的字符按键时触发此事件

 window.onkeydown=function (event){
        console.log(event.keyCode);//输出其按键的键数
    }
    window.onkeyup=function (){
        console.log('按键按下后放开');
    }

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .div {
            width: 100px;
            height: 100px;
            background: blue;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="box" class="div"></div>

<!--这个js语句要放在这下面才能使用，所以尽量写在这下面-->
<script type="text/javascript">
    var box = document.getElementById("box");
    document.onkeypress = function (event) {
        console.log(event.keyCode)
        event  = event || window.event;
        switch (event.keyCode) {
            case 100: //D键为100
                box.style.left = box.offsetLeft + 50+'px';//按下按键D则向左移动50px
                break;
            case 97:  //A键为97
                box.style.left = box.offsetLeft - 50+'px';//按下按键A键则向右移动50px
                break;
            case 119: //W键是119
                box.style.top = box.offsetTop - 50+'px';//按下按键W则向上移动50px
                break;
            case 115: //S键为115
                box.style.top = box.offsetTop + 50+'px'; //按下按键S则向下移动50px
                break;
        }
    }
</script>
</body>
</html>

运行结果:
以下是从指定位置，移动到此位置上的。
在这里插入图片描述

表单事件

用作于表单，当然其他地方也可以使用，不过适合于表单。

onchange：内容改变事件

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

    <input type="text" id="text1" onchange="console.log(document.getElementById('text1').value)">
<!--其中这个事件想要控制台输出值，是需要输入文本框后，再点出文本框才会控制台输出其值-->

    <input type="text" id="text2" value="document.getElementById('text2').value" oninput="console.log(document.getElementById('text2').value)">
<!--    获取其中文本框中的值-->

运行结果:
在这里插入图片描述
onselect:当文本框内容被选中时

    <input type="text" onselect="console.log('文本框被选择')">

当然控制台输出其指定语句，是必须要在其文本框内容被选择时，才会输出。

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

以上是我个人总结出来的一些事件。

不必再谢

关注

10
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
JavaScript常见事件的使用

当我们在某个元素上添加一个事件时，根据事件执行的前后可以把它当成一个事件流，例如在DOM事件中规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收到事件，最后是冒泡阶段，可以在这个阶段对事件做出响应。onmouseover：鼠标移动到某个设置了此事件的元素上时触发此事件。onmouseout：鼠标从某个设置了此事件的元素上离开时触发此事件。onkeyup：当键盘上的某个按键被按下后弹起时触发此事件。onmouseup：鼠标弹起时触发的事件。
复制链接

扫一扫