JavaScript 常用事件大全

2024-01-01 02:18:18

前言

事件是发生在你正在编程的系统中的事情——当事件发生时,系统产生(或“触发”)某种信号,并提供一种机制,当事件发生时,可以自动采取某种行动(即运行一些代码)。事件是在浏览器窗口内触发的,并倾向于附加到驻留在其中的特定项目。这可能是一个单一的元素,一组元素,当前标签中加载的 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>


在这里插入图片描述

文章来源:https://blog.csdn.net/mzdxxcdh/article/details/135270672
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。