JavaScript 中常用事件-CSDN博客

本文链接：https://blog.csdn.net/a836996156/article/details/135270293

前言:

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

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

文章目录

什么是事件

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	当表单元素获得焦点时触发
onselect	当文本框内容被选中时
onsubmit	当用户提交表单时触发

表单元素的内容变化事件
当指定表单元素的内容被改变时触发指定js代码。

代码演示：

<body>
<form>
    <input type="text" id="a">
</form>
<script>
    a.onchange = function f() {
        console.log("内容被改变");
    }
</script>
</body>

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

输入框中输入文本事件
当输入框输入文本时触发指定js代码。

代码演示：

<body>
<form>
    <input type="text" id="a">
</form>
<script>
    a.oninput = function f() {
        console.log("内容被改变");
    }
</script>
</body>

结果：

表单元素获取焦点事件
当指定表单元素获取焦点时触发指定js代码。

代码演示：

<body>
<form>
    <input type="text" id="a" ONFOCUS="f()">
</form>
<script>
    function f() {
        console.log("获取了焦点");
    }
</script>
</body>

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

表单元素内容被选中事件
当指定表单元素的内容被选中时触发指定的js代码。

代码演示：

<body>
<form>
    <input type="text" value="你好张三" onselect="f()">
</form>
<script>
    function f() {
        console.log("选中了内容");
    }
</script>
</body>

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

表单提交事件
当表单提交时触发指定的js代码。

代码演示：

<body>
<form action="" onsubmit="f()">
    <input type="text" value="你好张三" >
    <input type="submit" value="提交">
</form>
<script>
    function f() {
        alert("你提交了表单");
    }
</script>
</body>

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

窗口事件

当鼠标打开页面后，再点击其他文件窗口是就会触发焦点事件

属性名	描述
onblur	失去焦点
onfocus	获得焦点
onload	窗口加载事件
onresize	窗口大小缩放事件

失去焦点
当窗口失去焦点时触发指定的js代码。

代码演示：

<script>
    window.onblur = function () {
        console.log("窗口失去了焦点");
    }
</script>

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

获得焦点
当窗口获取焦点时触发指定的js代码。

代码演示：

<script>
    window.onfocus = function () {
        console.log("窗口获取了焦点");
    }
</script>

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

窗口加载事件
当窗口加载完毕时触发指定的js代码，每次刷新页面都是在加载。

代码演示：
```
<script>
    window.onload = function () {
        console.log("窗口加载完毕");
    }
</script>
```
结果：

窗口大小缩放事件
当窗口的大小发生改变时触发指定的js代码。

代码演示：

<script>
    window.onresize = function () {
        console.log("窗口大小发生改变");
    }
</script>

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

JavaScript事件冒泡(Bubble)

JavaScript事件冒泡指的是当一个元素上的事件被触发时，该事件将会向父元素传播，直到传播到文档的根元素，这个过程就叫做事件冒泡。

在事件冒泡过程中，先执行目标元素上注册的事件处理函数，然后再执行父元素上注册的事件处理函数，直到最后执行文档的根元素上注册的事件处理函数。

事件冒泡有以下特点：

事件冒泡是从目标元素向上冒泡到父元素，直到根元素。
默认情况下，所有的事件都会冒泡，但是可以通过在事件处理函数中调用 event.stopPropagation() 方法来阻止事件继续冒泡。
父元素上的事件处理函数会在子元素上的事件处理函数之后执行。

需要注意的是，事件冒泡只会在同一个文档中的元素之间发生，如果一个元素被移除了文档树，那么它上面的事件处理函数就不会触发冒泡。

这些基本上就是JavaScript 中常用的事件！