js_常用事件演示

2023-12-28 17:08:07

?前言?

1.如果代码对您有帮助  欢迎点赞👍+收藏?哟   后面如有问题可以私信评论哟🗒?
2.博主后面将持续更新哟😘

🎉文章目录

🍔一、在JavaScript中什么是事件？

JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。

基本原理

当我们在某个元素上添加一个事件时，根据事件执行的前后可以把它当成一个事件流，例如在DOM事件中规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。首先发生的是事件捕获，然后是实际的目标接收到事件，最后是冒泡阶段，可以在这个阶段对事件做出响应。

🍟二、为什么要使用事件

在JavaScript中，事件用于响应用户的交互操作或其他类型的操作。通过事件，可以将某个特定的函数或代码与特定的事件相关联。以下是一些常见的原因，为什么需要使用事件：

1、交互响应：事件可以帮助我们在用户与页面交互时做出相应的动作。
2、用户交互：事件可以捕获用户的交互行为，例如点击、拖动、滚动等操作。
3、表单验证：可以使用事件来对用户输入进行验证。
4、动态页面：事件可以用于动态地改变页面的内容和外观。
5、异步操作：事件可以与异步操作（例如AJAX请求）结合使用，以便在操作完成时执行相应的处理函数。

🌭三、常见事件的使用方法

属性作用
onclick单击事件
ondblclick双击事件
onmousedown鼠标按钮被按下
onmouseup鼠标按键被松开
onmousemove鼠标被移动
onmouseover鼠标移到某元素之上
onmouseout鼠标从某元素移开
onselect文本被选中
onscroll滚动条事件 监听滚动条滑动的高度

代码演示如下：

单击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    function showMessage(){
      console.log("这是点击事件");
    }
  </script>
</head>
<body>
<input type="button" value="点击按钮" onclick="showMessage()" />
</body>
</html>

运行结果：

在这里插入图片描述

双击事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    function showMessage(){
      console.log("这是双击事件");
    }
  </script>
</head>
<body>
<input type="button" value="双击按钮" ondblclick="showMessage()" />
</body>
</html>

运行结果：

在这里插入图片描述

鼠标被移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    window.onmousemove = function (){
      console.log("这是鼠标被移动");
    }
  </script>
</head>
<body>

</body>
</html>

运行结果：

在这里插入图片描述

鼠标从某元素移开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    window.onmouseout = function (){
      console.log("这是鼠标从某元素移开");
    }
  </script>
</head>
<body>

</body>
</html>

运行结果：

在这里插入图片描述

失去焦点和获得焦点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
      /*  窗口失去焦点时 */
      window.onblur = function (){
          console.log('窗口失去了焦点！')
      }
      /*  当窗口获得焦点时 */
      window.onfocus = function (){
          console.log('窗口获得了焦点！')
      }
  </script>
</head>
<body>

</body>
</html>

运行结果：

在这里插入图片描述

内容改变事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script>
    function fun1() {
      console.log('内容发生改变')
    }
  </script>
</head>
<body>
<input type="text" onchange="fun1()" oninput="fun1()">
</body>
</html>

运行结果：

在这里插入图片描述
onsubmit:为表单绑定提交事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /* 为表单绑定提交事件*/
         function fun1(){
            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 === ''){
                alert('密码不能为空')
            }else if (userPwd.length < 6 || userPwd.length > 12){
                alert('密码长度错误')
            }else if (!reg.test(userPwd)){
                alert('密码只能为字母与数字')
            }else {
                return true
            }
            return false
        }
    </script>
</head>
<body>
<form onsubmit="fun1()">
<input id="userCode" type="text"><br>
<input id="userPwd" type="password"><br>
<input type="submit" onsubmit="fun1()">
</form>
</body>
</html>

🌮四、总结

属性解释
click点击事件，当鼠标点击元素时触发。
mouseover鼠标悬停事件，当鼠标指针进入元素时触发。
mouseout鼠标离开事件，当鼠标指针离开元素时触发。
keydown键盘按下事件，当按下键盘上的任意键时触发。
keyup键盘松开事件，当释放键盘上的键时触发。
submit表单提交事件，当用户提交表单时触发。
load加载事件，当页面或某个元素完成加载时触发。
scroll滚动事件，当页面滚动时触发。
resize调整窗口大小事件，当调整浏览器窗口大小时触发。
focus获取焦点事件，当元素获取焦点时触发。
blur失去焦点事件，当元素失去焦点时触发。
change值改变事件，当表单元素的值发生改变时触发。
dblclick双击事件，当鼠标双击元素时触发。

这些事件可以通过addEventListener方法或者直接在HTML元素中使用on开头的属性来绑定相应的处理函数。

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