JavaScript 中常用事件

已于 2024-01-04 11:18:55 修改
阅读量1.3k 收藏 18
点赞数 42
文章标签： javascript 开发语言 html js 前端
于 2024-01-02 10:04:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a836996156/article/details/135270293
版权

前言:

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

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

文章目录

什么是事件

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

原理

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

鼠标事件

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

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

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

    代码示例：

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

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

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

    代码示例：

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

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

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

    代码演示：

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

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

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

    代码示例：

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

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

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

    代码演示：

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

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

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

    代码演示：

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

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

  7. 鼠标从指定元素上移出事件
    跟上面那个一样，有进入就有移出。

代码演示：

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

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

  1. 滚动条事件
    指定元素的滚动条被移动就会调用特定的js代码。
    <body>
<textarea style="width: 100px;height: 100px" onscroll="f()">
    你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
    你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
</textarea>
<script>
    function f() {
        console.log("滚动条被拖动");
    }
</script>
</body>
    结果：
    在这里插入图片描述
  2. 鼠标滚轮事件
    当鼠标滚轮滚动指定元素就会调用特定的js代码
    <body>
<textarea style="width: 100px;height: 100px" onmousewheel="f()">
    你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
    你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
</textarea>
<script>
    function f() {
        console.log("鼠标滚轮被移动");
    }
</script>
</body>
    结果：
    在这里插入图片描述

键盘事件

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

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

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

    代码示例：

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

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

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

    代码示例：

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

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

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

    代码演示：

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

    结果：
    在这里插入图片描述
    键盘上每个按键都有对应的值，通过值传递给页面进行相应。

表单事件

属性名描述
onchange当表单元素的值发生变化时触发
oninput当用户在输入框中输入文本时触发
onFocus当表单元素获得焦点时触发
onselect当文本框内容被选中时
onsubmit当用户提交表单时触发

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

    代码演示：

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

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

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

    代码演示：

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

    结果：

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

    代码演示：

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

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

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

    代码演示：

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

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

  5. 表单提交事件
    当表单提交时触发指定的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窗口大小缩放事件

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

    代码演示：

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

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

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

    代码演示：

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

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

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

    代码演示：

    <script>
    window.onload = function () {
        console.log("窗口加载完毕");
    }
</script>

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

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

    代码演示：

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

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

JavaScript事件冒泡(Bubble)

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

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

事件冒泡有以下特点：

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

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

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

小亮编码
关注
  • 42
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javaScript中常用事件
12-15
javaScript中常用事件 我自己总结的 对初学者应该还不错啊
JavaScript 中常用事件有哪些？
m0_68885781的博客
09-05 1874
JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在HTML页面中定义。
JavaScript中常用事件有哪些？
热门推荐
Aa112233aA1的博客
03-03 1万+
JavaScript是基于对象的脚本语言，它的一个最基本的特征就是采用事件鼎动。如，当鼠标指针经过某个按钮或者用户在文本框中输入某些信息时，都可以设置相应的JavaScript事件来完成某些特殊效果。下面，将对JavaScript中的常用事件进行详细讲解。 1.鼠标事件 鼠标事件是指通过鼠标动作触发的事件，鼠标事件有很多，下面列举几个常用的鼠标事件，如表所示。 2.键盘事件 键盘事件是指用户在使用键盘时触发的事件。例如，用户按【Esc】键关闭打开的状态栏，按【Enter】键直接完成光标的上下切换等。下面列
JavaScript中常用的事件
m0_66971047的博客
11-20 797
JavaScript中常用的事件
JavaScript中的常用事件
qq_45554909的博客
12-21 3385
JS中的事件： 概念：某些组件被执行了某些操作后，触发某些代码的执行。 事件：某些操作。如： 单击，双击，键盘按下了，鼠标移动了 事件源：组件。如： 按钮 文本输入框… 监听器：代码。 注册监听：将事件，事件源，监听器结合在一起。 当事件源上发生了某个事件，则触发执行某个监听器代码。 1、常用事件 1.点击事件： onclick：单击事件 ondblclick：双击事件 2.焦点事件 onblur：失去焦点 onfocus:元素获得焦点。 3.加载事件： onload：一张页面或一幅图像完成加
JavaScript常用事件
weixin_52754604的博客
11-20 1744
JavaScript事件
JavaScript常用事件详解
qq_49194786的博客
11-17 1321
js的常见事件
Javascript中常用方法
Jackmat的博客
05-27 2052
下面是JavaScript中实现继承的方法（需要注意的是当我们把一个包含函数的对象赋值给一个构造函数的原型对象时，此时构造函数的原型对象中的constructor已经不是指向了构造函数，这是因为对象属于复杂数据类型，它是有指针的，所以此时为了恢复指针的指向，我们此时需要把原型对象中的constructor重新指向构造函数，例如下图中的woman.prototype.constructor=woman）JavaScript中构造函数、原型对象、对象原型共同构成了JavaScript中的。
JavaScript中事件及其详解
qq_46642326的博客
11-16 1125
JS的dom操作可以改变网页内容，结构和样式，我们就可以利用dom操作元素来改变元素里面的内容属性等。：回调函数的特点：自己把这个函数代码写出来了，但是这个函数不是自己负责调用，由其他程序负责调用该函数。onmouseover和onmouseenter的区别：前者会影响子元素的触发事件，后者不会影响。onmouseover：鼠标移入某个元素触发。【修改元素属性】：先获取元素，注册事件，处理程序，然后直接调用元素的属性赋值。onkeyup：某个键盘按键被松开。事件源：事件被触发的对象，就是谁触发了这个事件。
JavaScript常用事件详情
weixin_51669424的博客
11-19 1769
JavaScript常用事件详情
常用的javascript事件大全
最初都是小白
05-09 3891
整理一下js事件，发现居然有这么多，常用的不常用的，感觉还是很灵活的 详细属性： 事件属性 描述 onabort 图像的加载被中断 onblur 元素失去焦点 onchange 域（元素）的内容被改变 onclick 当用户点击某个对象时调用的事件 ondblclick 当用户双击某个对象时调用的事件 onerror 在加载文档或图像是发生错误 onfocus 元素获得焦点 onkeydown 某个键盘按键被按下 onkeypress 某个键盘按键按下并松开
JavaScript常用事件介绍
10-17
今天小编就为大家分享一篇关于JavaScript常用事件介绍，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
javaScript常用事件
09-19
常用javaScript事件归纳。 常用事件： 1.onclick 鼠标单击事件 通常在下列基本对象中产生： button（按钮对象） checkbox（复选框）或（检查列表框） radio （单选钮） reset buttons（重要按钮） submit ...
javascript中常用编程知识
10-27
javascript虽然只是一个脚本语言，但是它完全也是一个编程语言需要我们来学习一下，下面是转载的篇关于javascript中常用的编程知识
TypeScript中的函数类型注解：精确定义行为与意图
逐星的博客
05-11 314
在TypeScript中，函数不仅是一段执行特定任务的代码块，它们还可以拥有自己的类型。函数类型注解允许开发者定义函数的参数类型和返回值类型，从而提高代码的可读性和可维护性。函数类型注解是TypeScript中定义函数时的重要特性，它有助于确保函数参数和返回值符合预期，从而提高代码的准确性和安全性。
使用 js 类封装项目中音频播放功能的工具方法utils
qq_40868156的博客
05-07 200
封装音频播放功能的工具方法，js，es6，前端，工程化
ts函数？
最新发布
FENGZXCjjjjj的博客
05-11 128
只要参数类型是匹配的，那么就认为它是有效的函数类型，而不在乎参数名是否正确。第二部分是返回值类型。对于返回值，我们在函数和返回值类型之前使用( =>)符号，使之清晰明了。如之前提到的，返回值类型是函数类型的必要部分，如果函数没有返回任何值，你也必须指定返回值类型为 void而不能留空。函数的类型只是由参数类型和返回值组成的。函数中使用的捕获变量不会体现在类型里。实际上，这些变量是函数的隐藏状态并不是组成API的一部分。
vue3引入element-plus完整步骤
zzx262625的博客
05-06 434
如果你的项目需要在低版本浏览器上运行，你可能需要使用一些转换工具（如Babel、ESBuild）和polyfill来确保兼容性。在你的Vue项目中配置一个编译器（如Vue CLI、Vite等），然后运行你的项目。你可以尝试在你的组件中使用一些Element Plus的组件来确保它们正常工作。使用npm（或cnpm，如果你在中国并且希望使用淘宝的npm镜像）来安装Element Plus。这样，你就可以在你的Vue组件中使用Element Plus的图标了。在你的Vue 3项目的入口文件（通常是。
TypeScript — 泛型
一只想躺平却不敢躺平的小菜鸟
05-09 134
TypeScript —— 泛型
请简述JavaScript中常用跳转语句
03-27
JavaScript中常用的跳转语句有两种：break语句和continue语句。 break语句用于在循环或switch语句中立即终止执行并跳出循环或switch语句。例如： ```javascript for (var i = 0; i ; i++) { if (i == 5) { break...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值