【JavaScript】——input元素的oninput事件和onchange事件
1.oninput事件是在输入框中输入时就会触发,该事件在<input>或<textarea>元素的值发送改变时触发。
2.onchange事件是在输入框输入完内容后,输入框失焦后触发。且onchange事件也可以作用于<keygen>和<select>元素。
input元素的oninput事件和onchange事件的区别:
oninput 事件适用于以下标签:
<input type=”password”>
<input type=”search”>
<input type=”text”>
<textarea>
onchange事件适用于:
<input>
<keygen>
<select>
input元素上绑定事件的三种方式:
//第一种:直接在元素标签上添加oninput属性,属性值为处理事件函数的调用<input type="text" id="input" oninput="handleInput()"></input>function handleInput() {// 处理事件代码
}//第二种:获取input元素,然后在元素对象上添加oninput属性,属性值为函数,函数内部为处理事件函数的调用<input type="text" id="input"></input>var inputEle = document.querySelector('#input')
inputEle.oninput = function() {handleInput()
}
function handleInput() {// 处理事件代码
}第三种:获取input元素,然后在元素上利用事件监听添加input事件<input type="text" id="input"></input>var inputEle = document.querySelector('#input')
inputEle.addEventListener('input', handleInput)
function handleInput() {// 处理事件代码
}
汇总onchange onpropertychange 和oninput事件的差别:
1、onchange事件与onpropertychange事件的差别:
onchange事件在内容改变(两次内容有可能还是相等的)且失去焦点时触发;onpropertychange事件却是实时触发,即每添加或删除一个字符就会触发。通过js改变也会触发该事件。可是该事件IE专有。
2、oninput事件与onpropertychange事件的差别:
oninput事件是IE之外的大多数浏览器支持的事件。在value改变时触发,实时的,即每添加或删除一个字符就会触发,然而通过js改变value时。却不会触发;onpropertychange事件是不论什么属性改变都会触发的,而oninput却仅仅在value改变时触发,oninput要通过addEventListener()来注冊,onpropertychange注冊方式跟一般事件一样。(此处都是指在js中动态绑定事件,以实现内容与行为分离)
3、oninput与onpropertychange失效的情况:
(1)oninput事件:a). 当脚本中改变value时。不会触发。b).从浏览器的自己主动下拉提示中选取时,不会触发。
(2)onpropertychange事件:当input设置为disable=true后。onpropertychange不会触发。
部分内容来自:
三者区别
oninput和onchange事件
【JavaScript】——input元素的oninput事件和onchange事件相关推荐
- input元素的oninput事件和onchange事件
input元素的oninput事件和onchange事件 框架用多了,感觉原生的有点弱化了,不说了,是时候巩固一波了 ^ _ ^ 1.input元素上绑定事件的三种方式: 第一种:直接在元素标签上添加 ...
- input元素的oninput事件和onchange事件的使用和区别
1.input元素上绑定事件的三种方式: 第一种:直接在元素标签上添加oninput属性,属性值为处理事件函数的调用 html代码: <input type="text" i ...
- JS改变input的value值不触发onchange事件解决方案 (转)
JS改变input的value值不触发onchange事件解决方案 (转) 参考文章: (1)JS改变input的value值不触发onchange事件解决方案 (转) (2)https://www. ...
- JS中onpropertychange事件和onchange事件区别
2019独角兽企业重金招聘Python工程师标准>>> 当一个HTML元素的属性用js改变的时候,都能通过 onpropertychange来捕获.例如一个 <input na ...
- 前端基础JS——input输入框的oninput事件和onchange事件
在开发过程中,input用的比较多的是change事件,忽略了还有input事件. onchange--input输入过程中不会触发,失去焦点时才会触发: 兼容性:所有浏览器都支持,可以用于& ...
- input 的 oninput onkeypress onkeydown onchange 事件的区别
事件执行顺序: <input type="text" id="foo" onkeydown="console.log('down')" ...
- JavaScript常用事件之onchange()事件、onblur()事件
一.onchange()事件 1.功能:onchange 事件会在域的内容改变时发生,也可用于单选框与复选框改变后触发的事件. 2.语法:οnchange="SomeJavaScriptCo ...
- html下拉框onchange事件,javascript 中select标签上放入onchange事件的两种方式分享
摘要: 下文讲述在html标签select上放入onchange事件的方式分享,如下所示: 例1: maomao365.com js select上直接使用onchange的方法 function s ...
- html加载onchange事件,HTML onchange事件用法及代码示例
当元素的值已更改时,将发生HTML DOM onchange事件.当选中的状态已更改时,它也可以使用单选按钮和复选框. 注意:此事件与oninput事件类似,但唯一的区别是oninput事件在元素值更 ...
最新文章
- Linux下du加强版,灵活快速定位硬盘使用情况,无需安装
- drupal与html转换,Drupal 7修改網頁HTML和顯示Title的辦法
- 谷歌体三维捕捉新突破:实现后期任意照明修改
- 八个最好的开源机器学习框架和库
- 使用php,使用 PHP
- 原版98启动盘镜像.img_装机技巧系列(二):系统安装之Windows 10启动盘制作
- 一个html文件创造多个页面,使页眉和页脚文件包含在多个html页面中。
- mysql集群搭建.pdf,内容太过真实
- java数据结构和算法------第八章
- Unity-VScode-Emmylua配置报错解决
- 备考BEC高级全记录:
- A 大吉大利,今晚吃鸡--枪械篇
- 大屏项目屏幕分辨率适配
- 五年级上册分数计算机,分数计算题 五年级上册分数加减法计算题(100道)
- Windows dss代理摄像头rtsp流 rtsp摄像头+ffmpeg+vlc
- 云服务器就是虚拟主机,为什么很多人说云主机就是虚拟主机?
- 带孩子们做环球旅行的读后感_适合夏天制作的简单小手工,带着孩子们做起来!...
- BI商业智能培训系列——(一)概述
- 操作系统怎么把文件放到docker容器里
- 机器学习模型的集成方法总结:Bagging, Boosting, Stacking, Voting, Blending