js常用事件演示

秋下1

已于 2024-01-04 15:24:36 修改

阅读量831

点赞数 29

文章标签：前端 javascript 开发语言

于 2024-01-01 23:07:13 首次发布

本文链接：https://blog.csdn.net/zz14664656/article/details/135274060

版权

什么是事件

在JavaScript中，事件是指当用户执行某个操作或浏览器发生某个特定的情况时触发的动作。这些操作可以是鼠标点击、键盘按键、页面加载等。通过捕获和处理这些事件，我们可以根据用户的操作或浏览器状态来执行相应的JavaScript代码。

事件可以与HTML元素相关联，当事件发生在该元素上时，我们可以通过JavaScript代码来捕获并处理这些事件。通过给元素添加事件监听器，我们可以指定事件发生时要执行的函数。

常见的事件包括点击事件（click）、鼠标移入事件（mouseover）、键盘按下事件（keydown）、页面加载事件（load）等。可以使用addEventListener()方法来为元素添加事件监听器，或使用HTML标签的属性直接指定事件处理函数。

为什么要使用事件

使用事件的目的是为了实现程序中不同部分之间的通信和交互。事件可以帮助我们在程序中处理异步操作，例如用户触发的事件、网络请求的完成等。通过使用事件，我们可以将程序的不同部分解耦，使得程序更加模块化和可扩展。

使用事件的好处

1. 简化程序逻辑：通过使用事件，可以将程序分解为多个模块，每个模块只需要关注自己感兴趣的事件，而不需要关心其他模块的实现细节。这样可以使得程序逻辑更加清晰、简洁。

2. 提高代码复用性：通过定义事件和事件处理器，可以将同一种事件在多个地方复用。这样可以减少代码的重复编写，并且使得程序的修改更加方便。

3. 实现异步操作：事件机制可以帮助我们处理异步操作，例如在网络请求完成后触发一个事件来通知其他部分进行处理。这样可以避免程序的阻塞，提高程序的响应速度和用户体验。

4. 支持插件式开发：通过定义事件和事件处理器，可以使得程序具有良好的扩展性。其他开发者可以通过注册自己的事件处理器来扩展程序的功能，而不需要修改原有的代码。

总的来说，使用事件可以提高程序的可读性、可维护性和可扩展性，使得程序更加灵活和高效。

js事件的使用

1.当窗口失去焦点时

  window.Object=function()
    {
      console.log("当窗口失去焦点时")
    }

2.当窗口获得焦点时

window.onfocus=function()
{
    console.log("当窗口获得焦点时")
}

效果图:

3.窗口加载事件

 window.onload=function ()
        {
            alert("窗口加载事件")
        }

效果图:

4.窗口大小缩放事件

window.onresize=function ()
        {
            alert("窗口大小缩放事件")
        }

5.内容改变事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //内容改变事件
        function un1()
        {
            alert(" 内容改变事件")
        }
        function un2()
        {
            alert("当文本框内容改变时  ，立即将改变内容 输出在控制台")
        }
    </script>
</head>
<body>
<form>
账号<input type="text" onchange="un1()"><br>
密码<input type="password" onchange="un2()"><br>
<input type="reset" name="butReset" value="重置按钮">
<input type="submit" name="butSubmit" value="提交按钮">
</form>
</body>
</html>

效果图:

6.获取表单未能提交时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        // oninvalid:获取表单 未能提交时
        function nu()
        {
            alert("请完成表单的内容")
        }
        
    </script>
</head>
<body>
<input type="text" value="whher " oninvalid="nu()" ><br>
</body>
</html>

7.文本框内容被选中时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //onselect:当文本框内容被选中时
        function nu1()
        {
            alert("呢已经选择了文本框")
        }
    </script>
</head>
<body>
文本框<input type="text" value="ssflkjlksdf" onselect="nu1()">
</body>
</html>

效果图:

8.onkeydown：当键盘上的某个按键被按下时触发此事件

   window.onkeydown=function (event)
        {
            event=event || window.event;
            console.log("键盘按下了"+event.keyCode);
            if(event.keyCode===13)
            {
                console.log("按下了回车")
            }
        }

9.onkeyup：当键盘上的某个按键被按下后弹起时触发此事件

//onkeyup：当键盘上的某个按键被按下后弹起时触发此事件
        window.onkeyup=function (event)
        {
            event=event || window.event;
            console.log("键盘按下了"+event.keyCode);
            if(event.keyCode===13)
            {
                console.log("按下了回车")
            }
        }

10.onkeypress：当输入有效的字符按键时触发此事件

   window.onkeypress=function (event)
        {
            event=event || window.event;
            console.log("键盘按下了"+event.keyCode);
            if(event.keyCode===13)
            {
                console.log("按下了回车")
            }
        }

11.鼠标事件

onclick：鼠标单击时触发此事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function  nu()
        {
            alert("鼠标单击时触发此事件")
        }
    </script>
   </head>
<body>
<input type="button" value="鼠标单击时触发此事件" onclick="nu()">
</body>
</html>

效果图:

ondblclick：鼠标双击时触发此事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function  nu1 ()
        {
            alert("鼠标双击时触发此事件")
        }
    </script>
   </head>
<body>
<input type="button" value="鼠标双击时触发此事件" ondblclick="nu1()">
</body>
</html>

效果图:

onmousedown：鼠标按下时触发此事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function  nu2 ()
        {
            alert("鼠标按下时触发此事件")
        }
    </script>
   </head>
<body>
<input type="button" value="鼠标按下时触发此事件" onmousedown="nu2()">
</body>
</html>

效果图:

onmouseup：鼠标弹起时触发的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <script>
       function  nu3()
       {
           alert("鼠标弹起时触发的事件")
       }
   </script>
</head>
<body>
<input type="button" value="鼠标弹起时触发的事件" onmouseup="nu3()">
</body>
</html>

效果图:

onmouseover：鼠标移动到某个设置了此事件的元素上时触发此事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <script>
       function  nu4 ()
       {
           alert("鼠标移动到某个设置了此事件的元素上时触发此事件")
       }
   </script>
</head>
<body>
<input type="button" value="鼠标移动到某个设置了此事件的元素上时触发此事件" onmouseover="nu4()">
</body>
</html>

效果图:

onmousemove：鼠标移动时触发此事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <script>
       function  nu5 ()
       {
           alert("鼠标移动时触发此事件")
       }
   </script>
</head>
<body>
<input type="button" value="鼠标移动时触发此事件" onmousemove="nu5()">
</body>
</html>

效果图:

onmouseout：鼠标从某个设置了此事件的元素上离开时触发此事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <script>
       function  nu6 ()
       {
           alert("鼠标从某个设置了此事件的元素上离开时触发此事件")
       }
   </script>
</head>
<body>
<input type="button" value="鼠标从某个设置了此事件的元素上离开时触发此事件" onmouseout="nu6()">
</body>
</html>

效果图:

12触发表单的提交事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
      function nu1()
        {
            let userCode=document.getElementById("userCode").value;
            let userPwd=document.getElementById("userPwd").value;
            var reg=/^[A-Za-z0-9]{6,12}$/;
            console.log("触发表单的提交事件!")
            if(userCode==='')
            {
                alert("账号不能为空")
            }else if(userCode.length<6 ||userCode.length>12)
            {
                alert("账号长度错误")
            }else if(!reg.test(userCode))
            {
                alert("账号只能为字母与数字")
            }else if(userPwd.length<6 || userPwd.length>12)
            {
                alert("密码长度错误")
            }else if(!reg.test(userPwd))
            {
                alert("密码只能为字母与数字")
            }else
            {
                return true
            }
            return false
        }
        //onclick:点击事件
        function nu()
        {
            alert("点击")
        }
    </script>
</head>
<body>
<form onsubmit="nu1()">
    <input id="userCode" type="text" value="">
    <input id="userPwd" type="password" value="">
    <input type="submit">
</form>
</body>
</html>

效果图:

秋下1

关注

29
点赞
踩
19

收藏

觉得还不错? 一键收藏
0
评论
js常用事件演示

在JavaScript中，事件是指当用户执行某个操作或浏览器发生某个特定的情况时触发的动作。这些操作可以是鼠标点击、键盘按键、页面加载等。通过捕获和处理这些事件，我们可以根据用户的操作或浏览器状态来执行相应的JavaScript代码。事件可以与HTML元素相关联，当事件发生在该元素上时，我们可以通过JavaScript代码来捕获并处理这些事件。通过给元素添加事件监听器，我们可以指定事件发生时要执行的函数。
复制链接

扫一扫