JavaScript 中常用事件

发布时间：2024年01月04日

前言:

介绍了什么是事件以及原理，还有常用的事件及使用

**如果演示结果不好理解，可以复制代码到自己的电脑中运行，这样你们可以更好理解也可以研究出好玩的，研究出的话顺便发给我也玩玩🤭

文章目录

什么是事件

JavaScript中的事件是指发生在HTML元素上的事情。当在HTML页面中使用JavaScript时，JavaScript可以触发这些事件。这些事件可以是浏览器行为，也可以是用户行为，例如单击某个链接或按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等。

原理

当事件发生时，可以使用JavaScript中的事件处理程序（也可称为事件监听器）来检测并执行某些特定的程序。例如，当用户点击一个按钮时，可以执行一段JavaScript代码来响应该点击事件。

鼠标事件

鼠标事件指通过鼠标触发的事件。

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

鼠标单击事件
鼠标点击指定元素就会调用特定的js代码。

代码示例：

<body>
<input type="button" value="鼠标点击一下" onclick="f()">
<script>
        function f() {
            console.log("鼠标单击了一下");
        }
</script>
</body>

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

鼠标双击事件
鼠标双击指定的元素就会调用特定的js代码。

代码示例：

<body>
<input type="button" value="鼠标双击一下" ondblclick="f()">
<script>
    function f() {
        console.log("鼠标双击了一下");
    }
</script>
</body>

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

鼠标按下事件
鼠标按下指定的元素就会调用特定的js代码。

代码演示：

<body>
<input type="button" value="鼠标点击一下" onmousedown="f()">
<script>
    function f() {
        console.log("鼠标按了一下");
    }
</script>
</body>

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

鼠标弹起事件
鼠标按下指定元素并松开就会调用特定的js代码。

代码示例：

<body>
<input type="button" value="鼠标点击一下" onmouseup="f()">
<script>
   function f() {
       console.log("鼠标按下按钮又松开了");
   }
</script>
</body>

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

鼠标移动事件
鼠标在指定元素上移动就会调用特定的js代码。

代码演示：

<body>
<div style="width: 100px;height: 100px;background-color: red" onmousemove="f()">
</div>
<script>
    function f() {
        console.log("鼠标在指定元素中移动了");
    }
</script>
</body>

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

鼠标移动到指定元素事件
鼠标移动到指定元素上就会调用特定的js代码，跟上面那个不一样，这个进入了只会调用一次代码，只有重新进入才会再次调用。

代码演示：
```
<body>
<div style="width: 100px;height: 100px;background-color: red" onmouseover="f()">
</div>
<script>
    function f() {
        console.log("鼠标进入了DIV");
    }
</script>
</body>
```
结果：
鼠标从指定元素上移出事件
跟上面那个一样，有进入就有移出。

代码演示：

<body>
<div style="width: 100px;height: 100px;background-color: red" onmouseout="f()">
</div>
<script>
    function f() {
        console.log("鼠标移出了DIV");
    }
</script>
</body>

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

滚动条事件
指定元素的滚动条被移动就会调用特定的js代码。

<body>
<textarea style="width: 100px;height: 100px" onscroll="f()">
    你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
    你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
</textarea>
<script>
    function f() {
        console.log("滚动条被拖动");
    }
</script>
</body>

结果：

鼠标滚轮事件
当鼠标滚轮滚动指定元素就会调用特定的js代码

<body>
<textarea style="width: 100px;height: 100px" onmousewheel="f()">
    你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
    你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
</textarea>
<script>
    function f() {
        console.log("鼠标滚轮被移动");
    }
</script>
</body>

结果：

键盘事件

键盘事件是指用户在使用键盘时触发的事件。例如，用户按【Esc】键关闭打开的状态栏，按【Enter】键直接完成光标的上下切换等。

属性名	描述
onkeydown	当键盘上的某个按键被按下时触发此事件
onkeyup	当键盘上的某个按键被按下后弹起时触发此事件
onkeypress	当输入有效的字符按键时触发此事件

键盘按键按下事件
键盘按键被按下时会给一个值，可以通过值，设置指定按键按下就执行什么操作。

代码示例：
```
<script>
window.onkeydown = function f() {
    var en = window.event;
    console.log("键盘按下了："+en.keyCode);
}
</script>
```
结果：

键盘按键按下后弹起事件
跟上面那个一样的，这个就是按下后松开触发的。

代码示例：

<script>
window.onkeyup = function f() {
    var en = window.event;
    console.log("键盘按下了："+en.keyCode);
}
</script>

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

键盘按键按下有效的字符事件
键盘按键按下有效的字符才能触发，像上下左右键不能触发。

代码演示：
```
<script>
window.onkeypress = function f() {
    var en = window.event;
    console.log("键盘按下了："+en.keyCode);
}
</script>
```
结果：

键盘上每个按键都有对应的值，通过值传递给页面进行相应。

表单事件

属性名	描述
onchange	内容改变事件
oninput	当文本框内容改变事件
onFocus	当表单元素被聚焦事件
oninvalid	获取表单未能提交时
onselect	当文本框内容被选中时
onsubmit	表单绑定提交事件

文章来源:https://blog.csdn.net/a836996156/article/details/135270293
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！