oninput事件onpropertychange事件onchange事件textIput事件
oninput事件&onpropertychange事件&onchange事件&textIput事件
oninput事件
简介
input
,select
,textarea
元素值更改时引发输入事件。这个事件支持冒泡。如果窗口支持,则
input
,select
,textarea
元素也受支持。
注意:通过JavaScript改变input
,select
,textarea
元素的值,无法触发该事件
PS:属性值contenteditable为true的任意元素输入,删除,剪切,粘贴操作,触发该事件
语法
window.onbeforeunload = function (event) {};
element.onbeforeunload = function (event) {};
window.addEventListener("input", function (event) {});
element.addEventListener("input", function (event) {});
示例
window.onbeforeunload = function (event) {event = event || window.event;console.log(event.target.value);
};window.addEventListener("input", function (event) {event = event || window.event;console.log(event.target.value);
});element.onbeforeunload = function (event) {console.log(element.value);
};element.addEventListener("input", function () {console.log(element.value);
});
应用场景
- 搜索提示,获取用户的实时输入,显示相应的提示信息
- 表单验证,获取用户的实时输入,进行实时的验证,显示对应的验证信息
浏览器兼容性
特征 | Chrome | Firefox | Safari | Edge | IE | Opera |
---|---|---|---|---|---|---|
基本支持 | yes | yes | yes | yes | 9.0[1] | yes |
[1] IE9 中都有个小BUG,那就是删除和剪切操作(通过右键菜单菜单中的剪切和删除命令删除内容的时候不会触发,键盘快捷键剪切和删除也无法触发该事件)不会触发该事件,而 IE 其他版本都是正常的。
参考:
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput
onpropertychange事件
简介
元素属性值发生变化时触发
IE浏览器独有事件,IE11以及之前的版本支持,Edge不支持,其他浏览器不支持
该事件不支持冒泡
注意:
- 和oninput事件和onchange事件不同的是,通过JavaScript改变元素的值,可以触发该事件。
- 该事件不支持冒泡,只能通过input元素去监听。
语法
element.onpropertychange = function (event) {};
element.attachEvent("onpropertychange", function (event) {});
示例
element.onpropertychange = function (event) {console.log(element.value);
};element.attachEvent('onpropertychange',function(){ console.log(element.value);
});
应用场景
- 搜索提示,获取用户的实时输入,显示相应的提示信息
- 表单验证,获取用户的实时输入,进行实时的验证,显示对应的验证信息
浏览器兼容性
特征 | Chrome | Firefox | Safari | Edge | IE | Opera |
---|---|---|---|---|---|---|
基本支持 | no | no | no | no | yes[1] | no |
[1] IE9 中都有个小BUG,那就是删除和剪切操作(通过右键菜单菜单中的剪切和删除命令删除内容的时候不会触发,键盘快捷键剪切和删除也无法触发该事件)不会触发该事件,而 IE 其他版本都是正常的。
参考:
无
onchange事件
简介
input
,select
,textarea
元素值更改时引发输入事件。这个事件支持冒泡。如果窗口支持,则
input
,select
,textarea
元素也受支持。
注意:该事件只有在input
,select
,textarea
值改变并失去焦点的情况下触发
语法
window.onchange = function (event) {};
element.onchange = function (event) {};
window.addEventListener("change", function (event) {});
element.addEventListener("change", function (event) {});
示例
window.onchange = function (event) {event = event || window.event;console.log(event.target.value);
};window.addEventListener("change", function (event) {event = event || window.event;console.log(event.target.value);
});element.onchange = function (event) {console.log(element.value);
};element.addEventListener("change", function () {console.log(element.value);
});
应用场景
浏览器兼容性
特征 | Chrome | Firefox | Safari | Edge | IE | Opera |
---|---|---|---|---|---|---|
基本支持 | yes | yes | yes | yes | yes[1] | yes |
[1] IE8以及IE8以下版本不支持onchange事件冒泡。
参考:
无
oninput事件&onpropertychange事件&onchange事件三者区别
onchange:
- 它在绑定对象的value值发生改变并失去焦点时,才触发onchange事件
- 如果得用javascript改变绑定对象的value值时,并不能触发onchange事件
- IE9下删除和剪切操作可以触发onchange事件
onpropertychange:
- 它在绑定对象的属性值发生改变时,触发onpropertychange事件。这是IE专有的,不支持其他浏览器
- 如果得用javascript改变绑定对象的value值时,可以触发onpropertychange事件
- IE9下删除和剪切操作无法触发onpropertychange事件
oninput:
- 它在绑定对象的value值发生改变时,触发oninput事件
- 如果得用javascript改变绑定对象的value值时,并不能触发oninput事件
- IE9下删除和剪切操作无法触发oninput事件
textInput事件(DOM3级事件)
简介
用户在可编辑区域中输入字符时,就会触发这个事件。
textInput用来代替keypress,二者区别:
- 任何可以获得焦点的元素都可以触发keypress事件,但只有可编辑区域才能触发textInput事件。
- textInput事件只会在用户按下能够输入实际字符的键时才会触发,而keypress事件则在按下那些能够影响文本显示的键时也会触发(比如退格键)。
语法
//textInput事件是DOM3级事件,不能通过on绑定
window.addEventListener("textInput", function (event) {});
element.addEventListener("textInput", function (event) {});
data属性
textInput事件主要考虑的是字符,因此它的event对象中还包含一个data属性,data值为用户输入的字符。
inputMethod属性
另外,event对象上还有一个属性,叫inputMethod,表示文本输入到文本框中的方式。使用这个属性可以确定文本是如何输入到控件中,从而验证其有效性。
- 0,表示浏览器不确定是怎么输入的
- 1,表示是使用键盘输入的
- 2,表示文本是粘贴进来的
- 3,表示文本是拖放进来的
- 4,表示文本是使用IME输入的
- 5,表示文本是通过在表单中选择某一项输入的
- 6,表示文本是通过手写输入的(比如使用手写笔)
- 7,表示文本是通过语音输入的
- 8,表示文本是通过集中方法组合输入的
- 9,表示文本是通过脚本输入的
PS: 只有IE支持inputMethod属性。
示例
window.addEventListener("textInput", function (event) {event = event || window.event;console.log(event.data);
});element.addEventListener("textInput", function (event) {
event = event || window.event;console.log(event.data);
});
应用场景
PS:个人感觉不好用
浏览器兼容性
特征 | Chrome | Firefox | Safari | Edge | IE | Opera |
---|---|---|---|---|---|---|
基本支持 | yes | yes | yes | yes | 9+ | yes |
参考:
- https://www.cnblogs.com/starof/p/6558581.html
oninput事件onpropertychange事件onchange事件textIput事件相关推荐
- WEB前端 -- 下拉框的触发事件分析(onchange、onfocus、onclick)
select的onChange事件问题解决 (onchange.onfocus.onclick.onmousedown) 一.onChange事件只有在值改变时才可触发,所以必须在每一次选择时(尤其第 ...
- 事件介绍、两种事件注册的介绍、onload事件、onclick事件、onblur事件、onchange事件、onsubmit事件
事件介绍 事件就是电脑输入设备与页面进行交互的响应,被称之为事件 常用的事件: onload 加载完成事件:页面加载完成之后,常用于做页面js代码初始化操作 onclick ...
- 什么是事件?JS中都有哪些事件?
什么是事件?JS中都有哪些事件? 事件就是用户对网页或浏览器做出的动作.通常来说,鼠标和键盘的动作称之为事件.当事件发生时,我们可以执行一些JS代码来实现某些功能或效果. 鼠标事件: Onclick鼠 ...
- js常用对象:点击、双击、onload事件、鼠标相关、onblur事件和onfocus事件等;通过循环给多个元素添加事件、通过addEventListener() 方法 监听事件函数...
1.通过标签内部添加事件 (1)onclick事件:单击事件 (2)ondbclick事件:双击事件 (3)onload事件:只能在body中使用,入口函数里有:window. .οnlοad=f ...
- html 输入框输入事件,input 输入框内的输入事件详细分析
1.基础:本次分析原理就是在各个浏览器下input内容变化的时候触发事件的各种不兼容性.在ie下用onpropertychange事件,在其他浏览器里用input事件. 2.用例:对每个浏览器分别测试 ...
- 事件注册方法、阻止默认事件、事件对象、事件冒泡:事件委托、事件捕获、重置表单
dom两种注册事件语法 1.点语法注册事件: 事件源.事件类型 = 事件处理函数 特点:不能注册'同名事件', 否则会覆盖 2.addEventListener 事件源.addEventListene ...
- iOS UITouch触摸与UIGesture手势.01.事件、触摸(touch)事件
一.iOS事件: 1.事件:事件就是当你在手机上点击手机屏幕.滑动手机翻面.摇动手机的时候,手机做出一些反应,对应的在应用程序里实现了某些代码的某些功能,完成这个过程就是一个事件. 2.iOS事件类型 ...
- 【Android View事件分发机制】关于拦截事件的注意点
在父容器拦截事件时,为什么不能拦截DOWN事件呢? 先看看源码: 回顾一下事件分发机制原理,当事件来了之后,如果父容器不拦截,则会询问其child view ,当某child view 有事件需求,父 ...
- JS事件冒泡机制和兼容性添加事件
本篇文章主要来讲讲 事件的冒泡机制 和 添加事件的几种方法. 一. JS的时间传递顺序: 捕获阶段 -> 目标阶段 -> 冒泡阶段 捕获阶段是指从父层往子层找.比如 <body> ...
最新文章
- php中怎么让主键自增长,php – 使用复合主键生成自动增量ID
- 网络爬虫(urllib超详细使用指南)
- iOS总结:项目中的各种小坑汇总
- [html] websocket握手成功会返回一个干什么状态吗?是200吗
- Mr.J---重拾Ajax(四)-- 跨域
- 【PE】手动给PE文件添加一段代码MessageBoxA
- 开发宝典:基于分布式对象的网游程序结构设计
- 图解设计模式 - Adapter 模式
- 【渝粤题库】陕西师范大学292141政府规制经济学作业(专升本)
- C语言 修改JPEG图片属性
- GPIO 使用 — Rockchip
- 中国移动H1S-3光猫破解路由器桥接教程
- 人脑与计算机之间有什么联系,电脑和人脑有什么不同
- 网页链接只能在微信端打开
- 什么是HSS?HSS有什么主要功能?HSS与HLR的区别是什么?
- html调用天气预报wsdl服务,调用天气预报Web Service
- word(wps)编号
- 学习MATLAB软件心得
- 爬行者LARM---Lucene
- STM32学习笔记——MDK新建项目
热门文章
- JS OffsetParent属性
- 模糊控制——理论基础(3模糊关系及其运算)
- 四步搞定PPT设计【年终总结篇】
- 年底了,带你看看韩国IT公司团建怎么玩?
- python写程序计算无穷级数_圆周率 π 展开 为 无穷级数
- Json 序列化以及反序列化的三种方式(二)
- Windows server 2008 网络负载均衡配置
- inline函数的使用和理解
- Count,TPM,FPKM,CPM之间的格式转换——Count转CPM
- error: invalid type argument of unary ‘*‘ (have ‘int‘) *__first = __tmp;