JavaScript 中常用事件

news2024/11/26 0:44:52

前言:

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

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

文章目录

- 什么是事件
- 原理
- 鼠标事件

什么是事件

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>