Event事件对象之表单事件

最新推荐文章于 2020-06-30 16:13:58 发布
最新推荐文章于 2020-06-30 16:13:58 发布
阅读量918 收藏 1
点赞数
分类专栏： 对象 javascript 事件 Event 文章标签： 对象 javascript Event 事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32758013/article/details/76223234
版权
javascript 同时被 3 个专栏收录
27 篇文章 0 订阅
订阅专栏
对象
25 篇文章 0 订阅
订阅专栏
事件
10 篇文章 0 订阅
订阅专栏
本文详细介绍了HTML表单中的事件，包括onblur、onchange、onfocus等，讲解了每个事件的触发时机、应用场景和浏览器支持情况，对于前端开发者理解和使用表单事件具有指导意义。
摘要由CSDN通过智能技术生成

1. onblur

在对象失去焦点时发生

Onblur 经常用于Javascript验证代码，一般用于表单输入框。

提示

onblur 相反事件为 onfocus 事件 。

支持的HTML标签
除了： <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>元素以外都可以
浏览器支持
googleIEfirefoxsafariopera
truetruetruetruetrue

ElementObject.onblur=function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
</head>
<body>
    <input id='input' type="text"/><span id='span'></span>
    <div id='div'></div>
</body>
<script>
    input.onfocus = function(){
        span.innerText = "    离开此输入框会有惊喜哟！";
    }

    input.onblur = function(){
        span.innerText = "";
        div.innerText = input.value;
    }

</script>
</html>

2. onchange

在域的内容改变时发生

提示
  • onchange 事件也可用于单选框与复选框改变后触发的事件。
  • 值在改变时候才会触发，当焦点离开时值才改变。
支持的HTML标签
除了： <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>元素以外都可以
浏览器支持
googleIEfirefoxsafariopera
truetruetruetruetrue

ElementObject.onfocus=function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
</head>
<body>
    <input id='input' type="text"/><span id='span'></span>
    <div id='div'></div>
</body>
<script>
    input.onchange = function(){
        div.innerText = this.value;
    }

</script>
</html>

3. onfocus

在对象获得焦点时发生

提示
  • Onfocus 通常用于 <input>, <select>, <a>.
  • onfocus 事件的相反事件为 onblur 事件。
支持的HTML标签
<input>, <select>, 和 <textarea>
浏览器支持
googleIEfirefoxsafariopera
truetruetruetruetrue

ElementObject.onchange=function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
</head>
<body>
    <input id='input' type="text"/><span id='span'></span>
    <div id='div'></div>
</body>
<script>
    input.onfocus = function(){
        span.innerText = "    离开此输入框会有惊喜哟！";
    }

    input.onblur = function(){
        span.innerText = "";
        div.innerText = input.value;
    }

</script>
</html>

4. onfocusin

在一个元素即将获得焦点时触发

提示
  • onfocusin 事件类似于 onfocus 事件。 主要的区别是 onfocus 事件不支持冒泡。因此，如果你想知道元素或者其子元素是否获取焦点，需要使用 onfocusin 事件。
  • 虽然 Firefox 浏览器不支持 onfocusin 事件， 但你可以通过使用 onfocus （使用addEventListener()方法的可选参数 useCapture）的捕获监听事件来查看元素或其子元素是否获取焦点。
  • onfocusin 事件的相反事件是 onfocusout 事件。
  • 支持冒泡。
支持的HTML标签
除了: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>
浏览器支持
googleIEfirefoxsafariopera
true9.0falsetruetrue
注意

在 Chrome, Safari 和 Opera 15+ 浏览器中使用 HTML DOM 语法的 onfocusin 事件可能无法正常工作。 但是，他作为一个 HTML 元素，通过使用 addEventListener() 方法可以正常工作。

ElementObject.onfocusin=function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
</head>
<body>
    <input id='input' type="text"/><span id='span'></span>
    <div id='div'></div>
</body>
<script>
    input.addEventListener('focusin',function(){
        alert('你点我了');
    })

    input.addEventListener('focusout',function(){
        alert('你点它了');
    })

</script>
</html>

5. onfocusout

在元素即将失去焦点时触发

提示
  • onfocusout 事件类似于 onblur 事件。 主要的区别是 onblur 事件不支持冒泡。因此，如果你需要查看元素或其子元素是否获取焦点，需要使用 onfocusout 事件。
  • 虽然 Firefox 浏览器不支持 onfocusout 事件， 但你可以通过使用 onblur （使用addEventListener()方法的可选参数 useCapture）的捕获监听事件来查看元素或其子元素是否获取焦点。
  • onfocusout 事件的相反事件是 onfocusin 事件。
  • 支持冒泡。
支持的HTML标签
除了: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>
浏览器支持
googleIEfirefoxsafariopera
true9.0falsetruetrue
注意

在 Chrome, Safari 和 Opera 15+ 浏览器中使用 HTML DOM 语法的 onfocusout 事件可能无法正常工作。 但是，他作为一个 HTML 元素，通过使用 addEventListener() 方法可以正常工作。

ElementObject.onfocusin=function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
</head>
<body>
    <input id='input' type="text"/><span id='span'></span>
    <div id='div'></div>
</body>
<script>
    input.addEventListener('focusin',function(){
        alert('你点我了');
    })

    input.addEventListener('focusout',function(){
        alert('你点它了');
    })

</script>
</html>

6. oninput

在用户输入时触发

提示
  • 该事件在 或 元素的值发生改变时触发
  • 该事件类似于 onchange 事件。不同之处在于 oninput 事件在元素值发生变化是立即触发， onchange 在元素失去焦点时触发。另外一点不同是 onchange 事件也可以作用于 和 元素。
  • 支持冒泡。
支持的HTML标签
<input type="password">, <input type="search">, <input type="text"> 和 <textarea>
浏览器支持
googleIEfirefoxsafariopera
true9.04.05.0true

ElementObject.oninput=function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
</head>
<body>
    <input id='input' type="text"/><span id='span'></span>
    <div id='div'></div>
</body>
<script>
    input.oninput = function(){
        div.innerText = this.value;
    }
</script>
</html>

7. onreset

在表单被重置后触发

提示
  • 支持冒泡。
  • 事件响应后重置文本。
支持的HTML标签
<form>, <keygen>
浏览器支持
googleIEfirefoxsafariopera
truetruetruetruetrue

ElementObject.onreset=function

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <title>zsh</title>
</head>
<body>
    <form id='form'>
        输入您的名字: <input id = 'inputText' type="text">
        <input type="reset">
    </form>
</body>
<script>
    var i = 0;
    form.onreset = function(){
        i++;
        setTimeout(text,0)//防止信息被重置，将事件响应放入栈底
    }

    function text()
    {
        if(i)
        inputText.value = '重置了' + i +'次';
    }
</script>
</html>

8. onselect

在文本框中的文本被选中时发生

支持的HTML标签
可用于: <input type="file">, <input type="password">, <input type="text">, <keygen>, 和 <textarea>.
浏览器支持
googleIEfirefoxsafariopera
truetruetruetruetrue

ElementObject.onselect=function

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zsh</title>
<script>
function myFunction(){
    alert("你选中了一些文本");
}
</script>
</head>
<body>

一些文本: <input type="text" value="Hello world!" onselect="myFunction()">

</body>
</html>

9. onsubmit

在表单提交时触发

提示
  • 支持冒泡
支持的HTML标签
<form>, <keygen>
浏览器支持
googleIEfirefoxsafariopera
truetruetruetruetrue

ElementObject.onsubmit=function

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>zsh</title>
</head>
<body>

<p>当提交表单是，触发函数并弹出提示信息。</p>
<form action="demo-form.php" onsubmit="myFunction()">
  输入名字: <input type="text" name="fname">
  <input type="submit" value="提交">
</form>
<script>
function myFunction() {
    alert("表单已提交");
}
</script>

</body>
</html>

文档内容出自 W3cSchool和菜鸟教程， 如需查看更详细的有关内容 请登录 http://www.w3school.com.cn/ 和 http://www.runoob.com/

zzzzzzz周绍辉
关注
专栏目录
form-create使用总结
風缘的博客
10-22 2万+
给表单项加className方便调整样式 rule: [ { type: 'input', title: '货物总毛重（KG）', // label名称 field: 'totalGrossWt', // 字段名称 value: '', // input值, col: {span: 16, labe...
表单元素事件 (Form Element Events)
09-05
表单元素事件 (Form Element Events)仅在表单元素中有效。
JavaScript event（事件） 字符串长度控制及Form表单提交控制
04-06
NULL 博文链接：https://colbybobo.iteye.com/blog/1543853
Event-5（表单事件）
weixin_45368324的博客
04-09 244
表单常用事件： focus 获取焦点 blur 失去焦点 change 在内容改变失去焦点时执行 （执行条件：如果内容发生变化 才会触发） input 在内容发生变化时触发！ submit 提交（表单功能） reset 重置（表单功能） select 选中文本框内容（表单功能） 失去焦点、获取焦点 表单常用事件 ...
表格操作eventTable
weixin_30362801的博客
01-24 470
---注意这里的demo中的css在这里被禁止了，出不出来，可以粘贴到本地运行查看情况--- 实现效果demo <button id="delect">删除</button> <button id="up">上移一行</button> <button id="down">下移一行</button><table i...
JavaScript核心之事件详解（表单，文档，自定义事件）
上善若泪
05-03 542
目录 1 表单事件 1.1 Input事件，select事件，change事件 1.1.1 input事件 1.1.2 select事件 1.1.3 Change事件 1.2 reset事件，submit事件 1.2.1 reset事件 1.2.2 submit事件 2 文档事件 2.1 beforeunload事件，unload事件，load事件，error事件，pagesh...
JS的Event事件对象使用方法
12-02
理解并熟练使用Event对象是每个前端开发者必备的技能之一。本篇文章将深入探讨JS的Event事件对象的使用方法。 首先，我们来分析提供的代码片段： ```javascript function getEvent(event) { var ev = event || ...
JavaScript学习笔记之JS事件对象
11-26
JavaScript中的事件对象是编程交互的核心，它记录了与事件相关的...总的来说，理解和熟练运用JavaScript的事件对象是进行前端开发的关键技能之一，它使得页面能够对用户的交互作出响应，提供了丰富的动态效果和功能。
html的DOM中Event对象onblur事件用法实例
09-03
HTML DOM中的Event对象是用于处理页面中各种交互事件的核心组件，它提供了丰富的接口来响应用户的操作，如点击、鼠标移动等。在众多事件中，`onblur`事件是一个非常实用的事件，它会在一个元素失去焦点时触发。这...
WinForm开发之控件使用和事件Event
haier123888的博客
04-13 1086
关于WinForm开发的说明 1、应用集中性：国内的C#上位机开发、HIS、ERP、MRP、二次开发、GIS等，几乎都是C#开发的！ 2、学习必要性：是.NET平台和非.NET平台最早出现的，学好C#开发的必备！企业应用是C/S+B/S WinForm开发学什么？ 1、UI设计（首先掌握原生的界面设计方法，其次，我们可以用WPF，第三方的控件）。要踏实的把UI界面设计，核心控件的使用，常用事件掌握！ 2、数据库应用。 3、基于C#+ADO.NET+SQLServer的系统开发。
F-event:小型但功能强大的事件处理程序
04-29
F-event Small but Powerful event handler 为什么要做这个呢，是因为在兼职写一个没有很好工程结构的项目的时候，需要用到这样一个模型，于是就诞生了这么一个项目，功能简单，目标明确~ have fun~ 安装 browser clone本项目，引入f-bus.es5.browser.js npm npm install f-event API 目前共有两种创建事件的方法 第一种(单例) 推荐用于解决全局事件,单例模式，全局引用相同 const { Fbus } = require('F-event'); let bus_1 = Fbus; 第二种(多个) 可以用于创建多个eventBus const { F_bus } = require('F-event'); let bus_3 = new F_bus(); 订阅事件 监听事件，如果启动命
fireEvent, onsubmit, 动态设置某对象的事件方法
tcdddd的专栏
11-01 1723
  function bbb() {  alert("ccc");  return false; } function aaa() {  //  form1.onsubmit=bbb;  form1.Submit3.onfocus=bbb;  form1.Submit3.fireEvent("onfocus");  }onsubmit="return bbb()" >              用
事件处理，JavaScript和Ajax
cusi77914的博客
06-30 230
JSF的最大卖点之一是它是一个基于组件的框架。 这意味着您可以实现您或其他人可以重复使用的组件。 在大多数情况下，这种强大的重用机制在JSF 1中变得无关紧要，因为很难实现组件。 但是，正如您在第2部分中所看到的那样，JSF 2借助一种称为复合组件的新功能，可以轻松地实现组件-无需Java代码也无需配置。 该功能很可能是JSF 2最重要的部分，因为它最终实现了JSF组件的潜力。 在有关...
Vue form-create的基本使用 和 自定义表单组件的数据通迅
热门推荐
沐枫
04-30 4万+
form-create 具有动态渲染、数据收集、校验和提交功能的表单生成器。 轻松搞定 form 表单,让你不再为表单而烦恼form-create 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成器。并且支持生成任何 Vue 组件。结合内置17种常用表单组件和自定义组件，再复杂的表单都可以轻松搞定。hidden、input、inputNumber、checkbox...
表单事件属性
qew~java
02-04 2858
表单事件是由HTML表单内部的动作触发事件，适用于所有的HLML5元素，主要用于表单元素中。表单事件属性如下所示： onblur :当元素失去焦点时触发事件 onchange :当元素改变时触发事件 oncontextmenu :当触发上下菜单时触发事件 onfous:单元素获得焦点时触发事件 onformchange :当标的改变时触发该事件 onforminput：当表单获得用户输
event对象获取方法总结
836811384
11-02 921
简介： Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 事件通常与函数结合使用，函数不会在事件发生前被执行！ Event对象的获取方法： 方法一： 例如：function demo1(e){ var e = e || window.event; //此种方法在ie中和google中可以不传参数e也可以获取到event，...
createEvent 自定义事件
betty_zhou0807的博客
06-27 397
浏览器之外的自定义事件，多次添加事件，dispatch一次，会多次触发 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery.min.js"...
HTML-事件(Event)的总结
Mazy's Blog
06-27 2175
HTML 与 JavaScript 的交互是通过事件来处理的，当用户或浏览器操纵页面时。事件就会发生。使用事件来执行 JavaScript 编码的响应每个HTML元素有一定的事件可以触发 JavaScript 代码比如： 加载页面、点击按钮、关闭窗口介绍几个常见的事件类型onclick 事件类型 这是最常用的事件类型，当用户点击鼠标左按钮。你可以把你的验证、警告等反对这个事件类型。 支持该事件的
Event对象：事件状态与属性解析
掌握Event对象的这些属性和用法，开发者能够更精细地控制用户的交互，实现复杂的网页功能，如自定义表单验证、拖放操作、多触点事件处理等。通过结合这些属性和JavaScript的事件处理机制，可以创建出丰富的用户体验...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值