JavaScript 常用事件大全

于 2023-12-28 16:28:26 发布
阅读量1.8k 收藏 55
点赞数 56
文章标签： 开发语言 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mzdxxcdh/article/details/135270672
版权

JavaScript 常用事件大全

前言

事件是发生在你正在编程的系统中的事情——当事件发生时，系统产生（或“触发”）某种信号，并提供一种机制，当事件发生时，可以自动采取某种行动（即运行一些代码）。事件是在浏览器窗口内触发的，并倾向于附加到驻留在其中的特定项目。这可能是一个单一的元素，一组元素，当前标签中加载的 HTML 文档，或整个浏览器窗口。有许多不同类型的事件可以发生。

1.鼠标事件

鼠标事件触发条件
onclick鼠标点击左键触发
oncontextmenu鼠标点击右键触发
ondblclick鼠标双击触发
onmouseover鼠标经过触发
onmouseout鼠标离开触发
onfocus获得鼠标焦点触发
onblur失去鼠标焦点触发
onmousemove鼠标移动触发
onmouseup鼠标弹起触发
onmousedown鼠标按下触发

01.鼠标点击左键触发---- onclick

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript">
    window.onclick = function() {
        alert("你好!")
    }
</script>
<body>
</body>
</html>
  • 显示结果
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/dc4a4abe7e2947d69497ddf194d15597.png

02.鼠标点击右键触发---- oncontextmenu

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript">


    window.oncontextmenu = function() {
        alert("你好!")
    }
</script>
<body>
</body>
</html>

在这里插入图片描述

03.鼠标双击触发---- ondblclick

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript">

    window.ondblclick = function() {
        alert("你好!")
    }
</script>
<body>
</body>
</html>

在这里插入图片描述

04.鼠标经过触发---- onmouseover

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript">

    window.onmouseover= function() {
        alert("你好!")
    }
</script>
<body>
</body>
</html>

在这里插入图片描述

05.鼠标离开触发---- onmouseout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript">

    window.onmouseout= function() {
        alert("你好!")
    }
</script>
<body>
</body>
</html>

在这里插入图片描述

06.获得鼠标焦点触发---- onfocus

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript">

    function show01() {
        console.log("你好!")
    }
</script>
<body>
<input onfocus="show01()" type="text">
</body>
</html>

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/f9cc27c9f5534a2d88053f075c083926.pn

07.失去鼠标焦点触发---- onblur

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript">

    function show01() {
        console.log("你好!")
    }
</script>
<body>
<input onblur="show01()" type="text">
</body>
</html>

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/f9cc27c9f5534a2d88053f075c083926.pn

鼠标移动触发---- onmousemove

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript">

   window.onmousemove = function() {
        console.log("你好!")
    }
</script>
<body>
</body>
</html>

在这里插入图片描述

2. 键盘事件

键盘事件触发条件
onkeyup某个键盘按键被松开时触发
onkeydown某个键盘按键被按下时触发
onkeypress某个键盘按键被按下时触发 不识别功能键 比如 ctrl 等

01.某个键盘按键被松开时触发---- onkeyup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript">

    window.onkeyup = function () {
        console.log("你好!")
    }
</script>
<body>
</body>
</html>

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/f9cc27c9f5534a2d88053f075c083926.pn

02.某个键盘按键被按下时触发---- onkeydown

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript">

    window.onkeydown= function () {
        console.log("你好!")
    }
</script>
<body>
</body>
</html>

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/f9cc27c9f5534a2d88053f075c083926.pn

03.某个键盘按键被按下时触发 不识别功能键 比如 ctrl 等---- onkeypress

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript">

    window.onkeydown= function () {
        console.log("你好!")
    }
</script>
<body>
</body>
</html>

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/f9cc27c9f5534a2d88053f075c083926.pn

3. 表单事件

表单事件触发条件
onsubmit绑定提交事件
onfocus聚焦
onblur失焦
onchange内容改变(在文本框输入数据) + 失焦 才会触发
oninput输入事件

01 绑定提交事件---- onsubmit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS 事件-鼠标事件</title>
    <script>
        window.onload = function () {

            var oForm = document.getElementsByTagName("form")[0];
            var aInput = document.getElementsByTagName("input")[0];

            // 绑定提交事件
            oForm.onsubmit = function () {
                console.log("提交成功");
                // 每次提交都会刷新页面，所以 return False 使其提交失败
                // 但提交事件依然发生（为了方便观察才这么做）
                return false;											// 可以注释观察效果
            }

        }
    </script>
</head>
<body>
<div id="test" style="background-color: pink; width: 200px; height: 200px;">
</div>
<br>
<hr>
<br>
<form action="http://www.baidu.com">
    <input type="text">
    <input type="submit">
</form>
</body>
</html>

在这里插入图片描述

02 聚焦---- onfocus

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS 事件-鼠标事件</title>
    <script>
        window.onload = function(){

            var oForm = document.getElementsByTagName("form")[0];
            var aInput = document.getElementsByTagName("input")[0];

            // 焦点（鼠标点击文本框，使其为输入状态）
            aInput.onfocus = function(){
                console.log("focus(焦点事件)");
            }
        }
    </script>
</head>
<body>
<div id="test" style="background-color: pink; width: 200px; height: 200px;">
</div>
<br><hr><br>
<form action="http://www.baidu.com">
    <input type="text">
    <input type="submit">
</form>
</body>
</html>

在这里插入图片描述

03 失焦---- onblur

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS 事件-鼠标事件</title>
    <script>
        window.onload = function () {

            var oForm = document.getElementsByTagName("form")[0];
            var aInput = document.getElementsByTagName("input")[0];

            // 失焦（鼠标点击文本框外，使其退出输入状态）
            aInput.onblur = function () {
                console.log("onblur(失焦事件)");
            }

        }
    </script>
</head>
<body>
<div id="test" style="background-color: pink; width: 200px; height: 200px;">
</div>
<br>
<hr>
<br>
<form action="http://www.baidu.com">
    <input type="text">
    <input type="submit">
</form>
</body>
</html>

在这里插入图片描述

04 内容改变---- onchange

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS 事件-鼠标事件</title>
    <script>
        window.onload = function () {

            var oForm = document.getElementsByTagName("form")[0];
            var aInput = document.getElementsByTagName("input")[0];

            // 内容改变(文本框输入数据) + 失焦 才会触发
            aInput.onchange = function () {
                console.log("内容改变");
            }

        }
    </script>
</head>
<body>
<div id="test" style="background-color: pink; width: 200px; height: 200px;">
</div>
<br>
<hr>
<br>
<form action="http://www.baidu.com">
    <input type="text">
    <input type="submit">
</form>
</body>
</html>

在这里插入图片描述

05 输入事件---- oninput

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JS 事件-鼠标事件</title>
    <script>
        window.onload = function () {

            var oForm = document.getElementsByTagName("form")[0];
            var aInput = document.getElementsByTagName("input")[0];

            // 输入事件
            aInput.oninput = function () {
                console.log("输入中");
            }

        }
    </script>
</head>
<body>
<div id="test" style="background-color: pink; width: 200px; height: 200px;">
</div>
<br>
<hr>
<br>
<form action="http://www.baidu.com">
    <input type="text">
    <input type="submit">
</form>
</body>
</html>

在这里插入图片描述

encounter073
关注
  • 56
    点赞
  • 踩
  • 55
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
JavaScript常用事件介绍
10-17
今天小编就为大家分享一篇关于JavaScript常用事件介绍，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
javascript常用大全
07-10
javascript常用方法，javascript常用判断，javascript实用命令，javascript常用函数集，javascript常用55个技巧，javascript深度剖析，107个常用的javascript语句.
javaScript常用事件
09-19
常用javaScript事件归纳。 常用事件： 1.onclick 鼠标单击事件 通常在下列基本对象中产生： button（按钮对象） checkbox（复选框）或（检查列表框） radio （单选钮） reset buttons（重要按钮） submit buttons（提交按钮） 例如可通过下列按钮激活change()文件： <Form> <Input type="button" Value="" onClick="change()"> </Form> 2.onLoad页面加载事件：当页面加载时，自动调用函数（方法）。注意：此方法只能写在<body>标签之中！ 3.onScroll窗口滚动事件：当页面滚动时调用函数。注意：此事件写在方法的外面，且函数名（方法名）后不加括号！例：window.onscroll=move; 4.onBlur失去焦点事件：当光标离开文本框是触发调用函数。 当text对象或textarea对象以及select对象不再拥有焦点、而退到后台时，引发该文件，他与onFocas事件是一个对应的关系。 5.onFocus事件：光标进入文本框时触发调用函数。 当用户单击Text或textarea以及select对象时，产生该事件。 6.onChange事件：文本框的value值发生改变时调用函数。当利用text或textarea元素输入字符值改变时发该事件，同时当在select表格项中一个选项状态改变后也会引发该事件。例： <Form> <Input type="text" name="Test" value="Test" onCharge="check('this.test)"> </Form> 7.onSubmit事件：属于<form>表单元素，写在<form>表单标签内。语法：onSubmit=”return 函数名()” 8.onKeyDown事件：在输入框中按下键盘上的任何一个键时，都会触发事件，调用函数。注意：此事件写在方法的外面，且函数名（方法名）后不加括号！例：document.onkeydown=函数名（）。 9.setTimeout(“函数名()”,间隔时间（以毫秒为单位）)； 10.clearTimeout(对象) 清除已设置的setTimeout对象 鼠标相关事件： 1.onMouseOver：鼠标移动到某对象范围的上方时，触发事件调用函数。注意：在同一个区域之内，无论怎样移动斗志触发一次函数。 2.onMouseOut:鼠标离开某对象范围时，触发事件调用函数。 3.onMouseMove: 鼠标移动到某对象范围的上方时，触发事件调用函数。注意：在同一个区域之内，只要一动一次就出发一次事件调用一次函数。 4.onmouseup 当鼠标松开 5.onmousedown 当鼠标按下键 document对象常用的方法： 1.document.getElementById():通过id获得唯一的一个HTML元素，没有id时，通过name查找 2.document.getElementByName()：获取相同名称的一组元素。主要用于表单中的复选框 Date对象常用方法： Var a=new Date(); //创建a为一个新的时期对象 y=a.getYear(); //y的值为从对象a中获取年份值 两位数年份 y1=a.getFullYear(); //获取全年份数 四位数年份 m=a.getMonth(); //获取月份值(0-11) d=a.getDate(); //获取日期值 d1=a.getDay(); //获取当前星期值 h=a.getHours(); //获取当前小时数 m1=a.getMinutes(); //获取当前分钟数 s=a.getSeconds(); //获取当前秒钟数
JavaScript常用事件
08-16
JavaScript常用事件JavaScript常用事件JavaScript常用事件JavaScript常用事件JavaScript常用事件JavaScript常用事件JavaScript常用事件JavaScript常用事件JavaScript常用事件JavaScript常用事件JavaScript常用事件JavaScript常用事件JavaScript常用事件JavaScript常用事件JavaScript常用事件JavaScript常用事件
常见的事件
weixin_39427688的博客
04-17 511
常见的事件： 1. 点击事件： 1. onclick：单击事件 2. ondblclick：双击事件 2. 焦点事件 1. onblur：失去焦点 2. onfocus:元素获得焦点。 3. 加载事件： 1. onload：一张页面或一幅图像完成加载。 4. 鼠标事件： ...
Javascript事件
qq_61483796的博客
09-03 798
JavaScript事件相关知识，及相关细节
JS的事件介绍
cnds123的专栏
09-29 1万+
JS事件，就是用户或浏览器本身的某种行为，一般是用户对页面的一些动作引起的，例如，单击某个链接或按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。当事件发生时，您可以使用 JavaScript 中的事件处理程序（也可称为事件监听器）来检测并执行某些特定的程序。JS（JavaScript）与HTML 之间的交互是通过事件（event）实现的，或者说，事件是JavaScript和DOM之间进行交互的桥梁。 一般情况下事件的名称都是以单词on开头的，例如点击事件 onclick、页面加载事件 onl
JavaScript事件介绍
西凉的悲伤博客
08-15 327
事件是发生在你正在编程的系统中的事情——当事件发生时，系统产生（或“触发”）某种信号，并提供一种机制，当事件发生时，可以自动采取某种行动（即运行一些代码）。事件是在浏览器窗口内触发的，并倾向于附加到驻留在其中的特定项目。这可能是一个单一的元素，一组元素，当前标签中加载的 HTML 文档，或整个浏览器窗口。有许多不同类型的事件可以发生。用户选择、点击或将光标悬停在某一元素上。用户在键盘中按下某个按键。用户调整浏览器窗口的大小或者关闭浏览器窗口。网页结束加载。表单提交。
JavaScript事件
weixin_43466575的博客
04-10 518
1、事件概述 （1）事件 事件：可被理解为是JavaScript侦测到的行为。 举例：这些行为指的就是页面的加载、鼠标单击页面、鼠标滑过某个区域等。 （2）事件处理程序 事件处理程序：指的就是JavaScript为响应用户行为所执行的程序代码。 举例：用户单击button按钮，这个行为就会被JavaScript中的click事件侦测到；然后让其自动执行，为click事件编写的程序代码，如在控制台输出“按钮被单击”。 （3）事件驱动式 事件驱动式：是指在Web页面中JavaScript的事件，侦测到的用户行为
JavaScript 事件
weixin_46121540的博客
02-01 163
JavaScript 事件
JavaScript中常用的事件
m0_66971047的博客
11-20 810
JavaScript中常用的事件
【学习笔记43】JavaScript的事件
yizhiyang
11-28 695
JavaScript的事件 三、鼠标事件 1. 左键单击：click 2. 键盘按下事件：keydown 3. 键盘按下抬起事件：keypress 五、表单事件 1. 获得焦点事件：focus 判断：Ctrl+A
JavaScript常用事件详情
weixin_51669424的博客
11-19 1772
JavaScript常用事件详情
javaScript中的事件
happy_kx的博客
03-28 2258
1.事件的概念 在js中的事件是：用户在页面上操作，然后外面要调用函数来处理。 比如： 1.点击了登录按钮，调用登录函数执行登录操作 2.鼠标拖动，调用函数实现拖动 事件触发： 用户在页面上操作（如点击按钮，鼠标话滚动，鼠标点击，鼠标松开，文本获取焦点等...）,就是事件触发。 2.事件的模式: JavaScript有两种事件实现模式: 内联模式, 脚本模式. 内联模式： 例如： <input type="button" value="按钮" onclick=...
js中鼠标右键触发事件
热门推荐
业余前端的职业经历
04-03 1万+
1.偶尔我们会碰见奇葩的需求,其实吧鼠标右键点击情况有，但并多，问了产品经理说。用户非得让加上鼠标右键点击事件,我晕。 心中很难受但还是得搞,有些那比较不常见的需求都可以分享分享。 鼠标右键 我就在打游戏的时候用的比较多 哈哈 2.好了废话不多说了,还是直接上代码 你可以有俩种方式做到 一种是dom自带的事件 2.1 contextmenu // 注意 取消默认行为 我们鼠标右键的时候 一般是弹...
js鼠标键盘事件
qq_42800468的博客
08-01 1646
注mouseover与mouseenter都是鼠标经过时触发，mouseover在鼠标经过子元素时会触发（会冒泡），mouseenter只在自身盒子时会触发（不会冒泡）例如果父标签为绑定事件，有子标签，点击子标签，target返回的是子标签元素，this返回父标签元素。所以如果大标签包含小标签且两个标签都有事件时，捕获时先执行大标签元素的事件；冒泡时先执行小标签的事件。鼠标移入监听对象中，或者从监听对象的一个子元素移入另一个子元素中时触发该事件。返回触发事件的对象，而this返回绑定事件的对象。...
一文读懂 JavaScript 事件
02-12 483
什么是事件模型，什么是事件流
JavaScript 事件详解
weixin_57519357的博客
09-08 570
JS事件的基础知识总结
JS基础—事件学习
weixin_44431280的博客
09-20 1618
在Web安全的学习过程中，了解JS事件的原理和不同类型的事件有助于我们学习和挖掘XSS，CSRF等前端漏洞，所以，学习JS事件是非常要必要的。
javascript常用代码
最新发布
01-14
以下是一些常用的JavaScript代码段： 1. 判断浏览器版本号 ```javascript function browserVersion(types) { var other = 1; for (i in types) { var v = types[i] ? types[i] : i; if (USERAGENT.indexOf(v) != -1) { var re = new RegExp(v + '(\\/|\\s|:)([\\d\\.]+)', 'ig'); var matches = re.exec(USERAGENT); var ver = matches != null ? matches[2] : 0; other = ver !== 0 && v != 'mozilla' ? 0 : other; } else { var ver = 0; } eval('BROWSER.' + i + '= ver'); } BROWSER.other = other; } ``` 2. 获取URL参数 ```javascript function getURLParameter(name) { var urlParams = new URLSearchParams(window.location.search); return urlParams.get(name); } ``` 3. 检测是否移动设备 ```javascript function isMobileDevice() { return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent); } ``` 4. 获取当前时间 ```javascript function getCurrentTime() { var now = new Date(); var hours = now.getHours(); var minutes = now.getMinutes(); var seconds = now.getSeconds(); return hours + ':' + minutes + ':' + seconds; } ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值