三、(JS)JS中常见的表单事件

一、onfocus、onblur事件

这个很容易理解,就不解释啦。

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <input type="text">

  <script>

    var inputEl = document.querySelector("input")

    // 1. 获取焦点和失去焦点.
    inputEl.onfocus = function () {
      console.log("input获取到了焦点");
    }

    inputEl.onblur = function () {
      console.log("input失去了焦点");
    }


  </script>

</body>

</html>

二、oninput、onchange事件

(1)输入的过程是input事件,内容确定发生改变(离开)是change事件

我们先来个案例看下各自是什么表现。我们先来个输入框,在输入框里面输入内容是什么反应。

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <input type="text">

  <script>

    var inputEl = document.querySelector("input")

    // 1. 获取焦点和失去焦点.
    // inputEl.onfocus = function () {
    //   console.log("input获取到了焦点");
    // }

    // inputEl.onblur = function () {
    //   console.log("input失去了焦点");
    // }

    // 2. 内容发生改变/输入内容
    inputEl.oninput = function () {
      console.log("input事件正在输入内容", inputEl.value);
    }

    inputEl.onchange = function () {
      console.log("change事件内容发生了改变", inputEl.value);
    }

  </script>

</body>

</html>

表现:我们一直输入a,页面输出结果如下。input事件随着我们输入内容(没有失去焦点),每次都会触发一次事件。但是不会触发onchange事件。

这个时候,我们输入完内容后从输入框中失去焦点看下。

表现:这个时候触发了onchange事件,所以oninput事件和onchange事件之间的区别是否很明显?

得出结论:输入的过程是input事件,内容确定发生改变(离开)是change事件

三、onreset、 onsubmit事件

(1)重置的事件是发生在form身上的。

举个例,我写一个form表单,里面有2个输入框一个是input输入框,一个是textarea,并且有2个按钮一个是重置按钮,一个是提交按钮。

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- <input type="text"> -->

  <form action="">
    <input type="text">

    <textarea name="" id=""></textarea>
    
    <button type="reset">重置</button>
    <button type="submit">提交</button>
  </form>

  <script>

    var inputEl = document.querySelector("input")

    // 1. 获取焦点和失去焦点.
    // inputEl.onfocus = function () {
    //   console.log("input获取到了焦点");
    // }

    // inputEl.onblur = function () {
    //   console.log("input失去了焦点");
    // }

    // 2. 内容发生改变/输入内容
    // 输入的过程是input事件,
    // 内容确定发生改变(离开)是change事件
    // inputEl.oninput = function () {
    //   console.log("input事件正在输入内容", inputEl.value);
    // }

    // inputEl.onchange = function () {
    //   console.log("change事件内容发生了改变", inputEl.value);
    // }

  </script>

</body>

</html>

此时我在页面上2个输入框里分别输入一些内容


然后点击重置看下变化。

得出结论:里面button重置按钮,重置的事件是发生在form身上的。

所以我们想要监听重置事件,得监听form元素。

(2)onreset事件

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- <input type="text"> -->

  <form action="/abc">
    <input type="text">

    <textarea name="" id=""></textarea>

    <button type="reset">重置</button>
    <button type="submit">提交</button>
  </form>

  <script>

    var inputEl = document.querySelector("input")

    // 1. 获取焦点和失去焦点.
    // inputEl.onfocus = function () {
    //   console.log("input获取到了焦点");
    // }

    // inputEl.onblur = function () {
    //   console.log("input失去了焦点");
    // }

    // 2. 内容发生改变/输入内容
    // 输入的过程是input事件,
    // 内容确定发生改变(离开)是change事件
    // inputEl.oninput = function () {
    //   console.log("input事件正在输入内容", inputEl.value);
    // }

    // inputEl.onchange = function () {
    //   console.log("change事件内容发生了改变", inputEl.value);
    // }

    // 3. 监听重置和提交
    var formEl = document.querySelector("form")
    formEl.onreset = function (event) {
      console.log("发生了重置事件");

      // 阻止默认行为
      event.preventDefault()

    }

  </script>

</body>

</html>

(3)onsubmit事件

通常开发中,我们需要阻止默认提交,手动来提交(axios库提交,后续会讲)。

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <!-- <input type="text"> -->

  <form action="/abc">
    <input type="text">

    <textarea name="" id=""></textarea>

    <button type="reset">重置</button>
    <button type="submit">提交</button>
  </form>

  <script>

    var inputEl = document.querySelector("input")

    // 1. 获取焦点和失去焦点.
    // inputEl.onfocus = function () {
    //   console.log("input获取到了焦点");
    // }

    // inputEl.onblur = function () {
    //   console.log("input失去了焦点");
    // }

    // 2. 内容发生改变/输入内容
    // 输入的过程是input事件,
    // 内容确定发生改变(离开)是change事件
    // inputEl.oninput = function () {
    //   console.log("input事件正在输入内容", inputEl.value);
    // }

    // inputEl.onchange = function () {
    //   console.log("change事件内容发生了改变", inputEl.value);
    // }

    // 3. 监听重置和提交
    var formEl = document.querySelector("form")
    formEl.onreset = function (event) {
      console.log("发生了重置事件");

      // 阻止默认行为
      event.preventDefault()

    }


    formEl.onsubmit = function () {
      console.log("发生了提交时间");
      // axios库提交
      event.preventDefault()
    }

  </script>

</body>

</html>
相关推荐
啵啵学习6 分钟前
浏览器插件,提示:此扩展程序未遵循 Chrome 扩展程序的最佳实践,因此已无法再使用
前端·chrome·浏览器·插件·破解
martian6656 分钟前
信创时代技术栈选择与前景分析:国产替代背景下的战略路径与实践指南
开发语言·科技·系统安全·创业创新
Mintopia11 分钟前
# 使用 Three.js 实现带随机障碍物的小车行驶模拟
前端·javascript·three.js
Mintopia12 分钟前
图形学与坐标系入门教学
前端·javascript·计算机图形学
{⌐■_■}14 分钟前
【计网】认识跨域,及其在go中通过注册CORS中间件解决跨域方案,go-zero、gin
java·linux·开发语言·c++·中间件·golang·gin
ErizJ21 分钟前
Golang|外观模式和具体逻辑
开发语言·golang·外观模式
ErizJ23 分钟前
Golang | 集合求交
开发语言·后端·golang·集合·交集
独立开阀者_FwtCoder28 分钟前
8年磨一剑,Koa 3.0 正式发布!看看带来了哪些新功能
前端·javascript·后端
代码程序猿RIP28 分钟前
【C语言干货】回调函数
c语言·开发语言·数据结构·c++·算法
Frankabcdefgh34 分钟前
初中级前端面试全攻略:自我介绍模板、项目讲解套路与常见问答
前端·面试·职场和发展