三、（JS）JS中常见的表单事件

于 2024-09-15 19:59:05 发布
阅读量648 收藏 4
点赞数 4
分类专栏： JS 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sean_0819/article/details/142287652
版权

 一、onfocus、onblur事件

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

<!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事件

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

<!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个按钮一个是重置按钮，一个是提交按钮。

<!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事件

<!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库提交，后续会讲）。

<!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>

覆水难收呀
关注
专栏目录
JS 系列之 事件—表单事件
Happy Simon
03-15 2741
今天跟大家分享一下JS系列之表单事件。 1 表单事件的种类 1.1 input 事件 input事件当、、的值发生变化时触发。对于复选框（）或单选框（），用户改变选项时，也会触发这个事件。另外，对于打开contenteditable属性的元素，只要值发生变化，也会触发input事件。 input事件的一个特点，就是会连续触发，比如用户每按下一次按键，就会触发一次input事件。 input事件对象...
javascript表单事件汇总
10-22
javascript表单事件汇总,纯文本格式
js焦点事件:onfocus、onblur、focus()、blur()、select()
weixin_34414650的博客
08-04 2477
什么是焦点事件 焦点：使浏览器能够区分用户输入的对象，当一个元素有焦点的时候，那么他就可以接收用户的输入只有能够响应用户操作额元素才可以接收焦点事件，比如：a button input... onfocus：当元素获取到焦点的时候触发 odiv.onfocus = funcion(){} onblur:当元素失去焦点的时候 obj.foc...
JS-表单事件
yixiesuifeng的博客
04-05 1030
①onblur(DOM2)：事件会在元素失去焦点时触发。(如：用户离开输入框时执行，经常用于JS验证代码) 浏览器都支持~ 标签都支持，除了那11种： , , , , , , , , , , 和 . 用法：前两种~     function myFunction(){ var x=document.getElementById("fname"); x.value=x.value.
JS:表单事件（7个）
weixin_59519449的博客
10-09 1714
表单事件 属性 描述 onfocus 元素获取焦点时触发 onblur 元素失去焦点时触发 onchange 该事件在表单元素的内容改变时触发( input, select, 和 textarea) oninput 元素获取...
表单事件（JavaScript）
weixin_50053454的博客
02-25 3454
常见的表单事件类型： 1.input输入事件 关注输入过程 var textInput = document.getElementById("myInput") var radios = document.getElementsByName("sex") textInput.oninput = function(){ console.log("input", this.value) } 2.change更新事件 关注输入结果 textInput.oncha
js中表单相关的事件
个人笔记
03-26 335
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="" method="get" id="f"> <input type="text" placeholder="请输入文本" id="i1"/> <input t
js系列教程9-表单元素全解
全栈工程师开发手册（原创）https://github.com/tencentmusic/cube-studio
08-09 2901
myform = document.getElementById("myform"); //acceptCharset服务器能够处理的字符集，action请求地址，elements表单字段input集合，enctype请求的编码类型，length表单控件数量，method请求方式，name名称，reset()表单恢复默认值，submit()表单提交，提交前触发，target请求发送和接收相应的窗口名
javascript中的表单事件
zhuying6666的博客
02-19 485
// JavaScript source code function judgment () { //获取验证是否为空的响应元素 var _isContent = document.getElementById("_isContent"); var _strs = document.getElementById("strs");//获取待验证的文本对象 //绑定按钮事件
JS 事件 —— 表单事件
白菜执笔人的博客
10-24 1652
Web前端基础 学习笔记 一、表单事件 1.1、onsubmit（绑定提交事件） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JS 事件-鼠标事件</title> <script> window.onlo...
js 表单事件
qq_35187942的博客
01-06 1050
onsubmit:事件 当提交表单的时候触发 submit()方法 提交表单 &lt;!DOCTYPE html&gt; &lt;html&gt;     &lt;head&gt;         &lt;meta charset="{CHARSET}"&gt;         &lt;title&gt;&lt;/title&gt;         &lt;script&g
js表单事件详细汇总
01-21
javascript表单事件汇总 1。onabort（ns3，ns4，ie4）：当用户终止正在打开的网页时产生该事件。 2。onblur（ns3，ns4，ie3，ie4）：某元素失去活动焦点时产生该事件。例如鼠标在文本框中点击后又在文本框外点击时就会产生。 3。onchange（ns3，ns4，ie3，ie4）：当网页上某元素的内容发生改变时产生。例如在文本框中输入文本后又在文本框外点击时就会产生。 4。onclick（ns3，ns4，ie3，ie4）单击网页上的某元素时产生 5。ondblclick（ns4，ie4）：双击网页上的元素时产生 6。onerror（ns3，ns4，ie4）：浏览
【前端面试题】【EVENT】
m0_57517704的博客
09-13 146
JSON是一种特殊格式的字符串，可以与数组，对象进行转换，常用于前后端数据交互，文件配置说明。2.sessionStorage数据依赖浏览器，当页面关闭或者退出浏览器时清空数据，存储量大。把事件添加给标签的父元素，通过事件对象e.target来实现具体操作。3.cookie 可以为数据设置过期时间，存储量小，可以与后台共用。函数内实现另一个函数，局部变量数据持久化，造成一定内存压力。8.事件冒泡:同类型事件，子级向父级传递。9.事件捕获：同类型事件，父级向子级传递。change：内容被修改并且失去焦点。
js表单事件总结
m0_46205209的博客
08-13 379
onChange 内容发生改变时并且失去焦点 。常用于获取表单内容时。 在用于文本框输入框时,有一个明显的不足. 事件不会随着文字的输入而触发,而是等到文本框失去焦点(onblur)时才会触发. 也就是没有即时性! 且必须值变化才触发 。 onblue input失去焦点时，就会被调用。 常用于表单验证 onfoucs 获得焦点时就会被调用。 常用于表单获取焦点时的外观变化。 JS事件函数总结 https://blog.csdn.net/qq_41194704/article/details/10270
表单事件处理
测试0901-1
09-27 189
React 表单与事件本章节我们将讨论如何在 React 中使用表单。一个简单的实例在实例中我们设置了输入框 input 值value = {this.state.data}。在输入框值发生变化时我们可以更新 state。我们可以使用 onChange 事件来监听 input 的变化，并修改 state。React 实例var HelloMessage = React.createClass({ ...
JavaScript的表单事件
天高任鸟飞
07-08 352
表单事件 Submit 当提交表单时，触发 Change 当元素的值改变时，触发 Focus 当元素获得焦点时，触发 Blur 当元素失去焦点时，触发
JavaScript:表单事件
WHT869706733的博客
12-01 252
<body> <form id="register"> <label>用户名：<input id="user" type="text"></label> <input type="submit" value="提交"> <input type="reset" value="重置"> </form> <script> // 获取表.
onfocus 失去焦点事件
最新发布
05-24
onfocus 是一个 HTML 元素的事件属性，用于指定在元素获取焦点时执行的 JavaScript 代码。相应地，失去焦点事件则是 onblur 属性，用于指定在元素失去焦点时执行的 JavaScript 代码。例如： ``` <input type="text" onfocus="alert('输入框获得焦点了！')" onblur="alert('输入框失去焦点了！')"> ``` 在上面的例子中，当这个文本框获得焦点时，会弹出一个警示框，显示“输入框获得焦点了！”；当文本框失去焦点时，会弹出另一个警示框，显示“输入框失去焦点了！”。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值