js_常用事件演示

✨前言✨

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

文章目录

  • 一、在JavaScript中什么是事件?
  • 二、为什么要使用事件
  • 三、常见事件的使用方法
  • 四、总结

一、在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>Titletitle>
  <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>Titletitle>
  <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>Titletitle>
  <script>
    window.onmousemove = function (){
      console.log("这是鼠标被移动");
    }
  script>
head>
<body>

body>
html>

运行结果:

在这里插入图片描述

鼠标从某元素移开

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

body>
html>

运行结果:

在这里插入图片描述

失去焦点和获得焦点

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

body>
html>

运行结果:

js_常用事件演示_第1张图片

内容改变事件

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
  <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>Titletitle>
    <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开头的属性来绑定相应的处理函数。

你可能感兴趣的:(javascript,开发语言,ecmascript)