表单事件

input 事件        select 事件        change 事件        invalid 事件        reset 事件         submit 事件

input 事件

<input>、<select>、<textarea>的值发生变化时触发

对于 复选框(<input type=checkbox>)单选框(<input type=radio>),用户改变选项时,也会触发这个事件

对于打开 contenteditable 属性的元素,只要值发生变化,也会触发 input 事件

  • 特点:

连续触发,比如用户每按下一次按键,就会触发一次 input 事件

在元素的值发生变化后立即发生

有连续变化,input 事件会触发多次,而 change 事件只在失去焦点时触发一次

继承了 InputEvent 接口

select 事件

当在<input>、<textarea>里面选中文本时触发

  • // HTML 代码如下
    // <input id="test" type="text" value="Select me!" /> var elem = document.getElementById('test');
    elem.addEventListener('select', function (e) {
    console.log(e.type); // "select"
    }, false);

选中的文本可以通过 event.target 元素的 selectionDirectionselectionEndselectionStartvalue 属性拿到

change 事件 

当<input>、<select>、<textarea>的值发生变化时触发。

它与 input 事件的最大不同,就是不会连续触发,只有当全部修改完成时才会触发,另一方面 input 事件必然伴随 change 事件。

  • 激活 单选框(radio)或 复选框(checkbox)时触发。
  • 用户提交时触发。        比如,从下列列表(select)完成选择,在日期或文件输入框完成选择。
  • 当文本框或<textarea>元素的值发生改变,并且丧失焦点时触发。
  • // HTML 代码如下
    // <select size="1" onchange="changeEventHandler(event);">
    // <option>chocolate</option>
    // <option>strawberry</option>
    // <option>vanilla</option>
    // </select> function changeEventHandler(event) {
    console.log(event.target.value);
    }

invalid 事件

用户提交表单时,如果表单元素的值不满足校验条件,就会触发 invalid 事件

  • // 输入框是必填的。如果不填,用户点击按钮提交时,就会触发输入框的invalid事件,导致提交被取消
    <form>
    <input type="text" required oninvalid="console.log('invalid input')" />
    <button type="submit">提交</button>
    </form>

reset 事件

这个事件发生在表单对象 <form> 上,而不是发生在表单的成员上

当表单重置(所有表单成员变回默认值)时触发

submit 事件

当表单数据向服务器提交时触发。

注意,submit事件的发生对象是 <form> 元素,而不是<button>元素,因为提交的是表单,而不是按钮

浏览器原生提供 InputEvent() 构造函数, 用来生成实例对象

InputEvent接口主要用来描述 input 事件的实例。

该接口继承了 Event 接口,还定义了一些自己的实例属性和实例方法。

  • var inputEvent = new InputEvent(type, options);

第一个参数 是字符串,表示事件名称,该参数是必需的。

第二个参数 是一个配置对象用来设置事件实例的属性,该参数是可选的。

配置对象的字段除了 Event 构造函数的配置属性,还可以设置下面的字段,这些字段都是可选的

  • inputType            字符串,表示发生变更的类型(详见下文)。
  • data            字符串,表示插入的字符串。如果没有插入的字符串(比如删除操作),则返回 null 或空字符串。
  • dataTransfer            返回一个 DataTransfer 对象实例,该属性通常只在输入框接受富文本输入时有效。

event.data

返回一个字符串,表示变动的内容

  • // HTML 代码如下
    // <input type="text" id="myInput">
    var input = document.getElementById('myInput');
    input.addEventListener('input', myFunction, false); function myFunction(e) {
    console.log(e.data);
    }

event.inputType

  • 返回一个字符串,表示字符串发生变更的类型
  • insertText           手动插入文本
  • insertFromPaste           粘贴插入文本
  • deleteContentBackward           向后删除
  • deleteContentForward           向前删除

event.dataTransfer

返回一个 DataTransfer 实例。

该属性只在文本框接受粘贴内容(insertFromPaste)拖拽内容(insertFromDrop)时才有效

(96)Wangdao.com_第二十九天_表单事件的更多相关文章

  1. (93)Wangdao.com_第二十六天_鼠标事件

    鼠标事件 与鼠标相关的事件,继承了 MouseEvent 接口 分类: click        按下鼠标(通常是按下主按钮)时触发.        mousedown 首先触发,mouseup 接着 ...

  2. JavaScript(第二十六天)【表单处理】

    为了分担服务器处理表单的压力,JavaScript提供了一些解决方案,从而大大打破了处处依赖服务器的局面.   一.表单介绍 在HTML中,表单是由<form>元素来表示的,而在JavaS ...

  3. (92)Wangdao.com_第二十五天_线程机制_H5 Web Workers 分线程任务_事件 Event

    浏览器内核 支撑浏览器运行的最核心的程序 IE 浏览器内核            Trident内核,也是俗称的IE内核Chrome 浏览器内核            统称为 Chromium 内核或 ...

  4. (94)Wangdao.com_第二十七天_键盘事件

    键盘事件 键盘事件由用户击打键盘触发 主要有 keydown.keyup .keypress三个事件,它们都继承了 KeyboardEvent 接口. keydown         按下键时 触发 ...

  5. 孤荷凌寒自学python第二十九天python的datetime.time模块

     孤荷凌寒自学python第二十九天python的datetime.time模块 (完整学习过程屏幕记录视频地址在文末,手写笔记在文末) datetime.time模块是专门用来表示纯时间部分的类. ...

  6. SpringBoot(五)_表单验证

    SpringBoot(五)_表单验证 参数校验在我们日常开发中非常常见,最基本的校验有判断属性是否为空.长度是否符合要求等,在传统的开发模式中需要写一堆的 if else 来处理这些逻辑,很繁琐,效率 ...

  7. 前端(十五)—— JavaScript事件:绑定事件方式、事件的冒泡和默认事件、鼠标事件、键盘事件、表单 事件、文档事件、图片事件、页面事件

    JS事件:绑定事件方式.事件的冒泡和默认事件.鼠标事件.键盘事件.表单 事件.文档事件.图片事件.页面事件 一.事件的两种绑定方式 1.on事件绑定方式 document.onclick = func ...

  8. javascript中的常用表单事件用法

    下面介绍几种javascript中常用的表单事件: 一,onsubmit:表单中的确认按钮被点击时发生的事件,如下案例. 案例解析:弹出表单中提交的内容 <form name="tes ...

  9. jQuery基础(鼠标事件,表单事件,键盘事件,自定义事件 篇)

    1.jQuery鼠标事件之click与dbclick事件   方法一:$ele.click()(不带参数)   <div id="test">点击触发<div&g ...

随机推荐

  1. Git 分支 (二)合并

    分支的新建与合并 让我们来看一个简单的分支新建与分支合并的例子,实际工作中你可能会用到类似的工作流. 你将经历如下步骤:1. 开发某个网站.2. 为实现某个新的需求,创建一个分支.3. 在这个分支上开 ...

  2. 源码来袭:bind手写实现

    JavaScript中的this指向规则 源码来袭:call.apply手写实现与应用 理解建议:如果对this指向规则不了解的话,建议先了解this指向规则,最好还能对call和apply的使用和内 ...

  3. 轴对称 Navier-Stokes 方程组的点态正则性准则 II

    在 [Wei, Dongyi. Regularity criterion to the axially symmetric Navier-Stokes equations. J. Math. Anal ...

  4. 字符串常量池和String.intern()方法在jdk1.6、1.7、1.8中的变化

    字符串常量池也是运行时常量池 jdk1.6中,它是在方法区中,属于“永久代” jdk1.7中,它被移除方法区,放在java堆中 jdk1.8中,取消了“永久代”,将常量池放在元空间,与堆独立了 pub ...

  5. 410 for 循环 运算 改变循环的控制流 死循环 遍历数组 定义方法 有名函数匿名函数 定义函数的方法取值 date math 局部变量 函数 局部与全局变量 次幂/随机数/取绝对值/向上取整/平方根

    for(1.表达式1;2.表达式2;3.表达式3){ 4.循环体语句; } 先执行1 ,在执行2, 表达式, 如果2结果为false,退出循环 如果2是true 执行4 在执行3 执行2 举例打印1- ...

  6. android:shape 设置圆形

    组件高度和宽度设置为相同的值即可<?xml version="1.0" encoding="utf-8"?><shape xmlns:andr ...

  7. 蒸米一步一步ROP X64学习笔记

    原文地址https://segmentfault.com/a/1190000007406442,源代码地址https://github.com/zhengmin1989/ROP_STEP_BY_STE ...

  8. Django 序列化-token

    幂等性 幂等性:多次操作的结果和一次操作的结果是一样的 ,put请求是幂等的 post请求不是幂等的 序列化组件 全局和局部钩子函数 异常信息抛出过程 认证 路由里的,login.as_view() ...

  9. github密钥

    官网英文资料:https://help.github.com/articles/connecting-to-github-with-ssh/ 1.生成SSH keys文件id_rsa.pub ssh- ...

  10. bzoj1040基环树

    ... st#include<cstdio> #include<iostream> #include<algorithm> #include<cmath> ...