input元素的oninput事件和onchange事件的使用和区别
1、input元素上绑定事件的三种方式:
第一种:直接在元素标签上添加oninput属性,属性值为处理事件函数的调用
html代码:
<input type="text" id="input" oninput="handleInput()"></input>
js代码:
function handleInput() {// 处理事件代码
}
第二种:获取input元素,然后在元素对象上添加oninput属性,属性值为函数,函数内部为处理事件函数的调用
html代码:
<input type="text" id="input"></input>
js代码:
var inputEle = document.querySelector('#input')
inputEle.oninput = function() {handleInput()
}
function handleInput() {// 处理事件代码
}
第三种:获取input元素,然后在元素上利用事件监听添加input事件
html代码:
<input type="text" id="input"></input>
js代码:
var inputEle = document.querySelector('#input')
inputEle.addEventListener('input', handleInput)
function handleInput() {// 处理事件代码
}
2、input元素的oninput事件和onchange事件的区别
oninput事件是在输入框中输入时就会触发
onchange事件是在输入框输入完内容后,输入框失焦后触发
onchange事件兼容性好,主流浏览器都支持
input元素的oninput事件和onchange事件的使用和区别相关推荐
- 【JavaScript】——input元素的oninput事件和onchange事件
1.oninput事件是在输入框中输入时就会触发,该事件在<input>或<textarea>元素的值发送改变时触发. 2.onchange事件是在输入框输入完内容后,输入框失 ...
- input元素的oninput事件和onchange事件
input元素的oninput事件和onchange事件 框架用多了,感觉原生的有点弱化了,不说了,是时候巩固一波了 ^ _ ^ 1.input元素上绑定事件的三种方式: 第一种:直接在元素标签上添加 ...
- 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')" ...
- html加载onchange事件,HTML onchange事件用法及代码示例
当元素的值已更改时,将发生HTML DOM onchange事件.当选中的状态已更改时,它也可以使用单选按钮和复选框. 注意:此事件与oninput事件类似,但唯一的区别是oninput事件在元素值更 ...
- onload事件、onblur事件、onchange事件、onsubmit事件举例
一.onload.加载事件 load事件什么时候发生? onload事件是浏览器解析完页面之后就会自动触发的事,页面全部元素加载完毕之后才会发生 1.以下执行是错误的,因为代码执行的时候id=&quo ...
- onmouseout事件与onchange事件分析
今天修改Bug,新到期时间为:原到期时间+续卡时间 而不是 当前日期+续卡时间.在修改的过程中发现一个Bug.那就是续卡时间数值框我输入新数值A之后,点击窗体空白处,新到期时间并没有修改过来, 再次点 ...
最新文章
- Python超详细的字符串用法大全
- linux 查看namenode进程是否存活:返回namenode进程个数
- mysql 5.7.17 x86_Windows(x86,64bit)升级MySQL 5.7.17免安装版的详细教程
- 9-算法 kmp算法
- c语言编程获取摄像头图像,OpenCV 获取摄像头图像数据并显示
- 水箱建模最小二乘法_北师大版小学数学下册五年级第四单元长方体(二)整理复习电子课本练习同步教学视频...
- function signature是什么
- MySQL基本知识笔记
- 最新HoloLens在windows10上的开发配置(1)
- 机器人多维度高速精密切割加工 引领切割技术升级
- Linux 内核官网下载
- 漫画:如何用脚本抢月饼?
- workman安装以及使用
- android egl10和egl14
- 什么?你连个三色渐变圆角按钮都需要UI切图?
- html td 的横向与纵向合并
- SPI的NSS 脉冲模式的作用
- 除夕之夜-梦游天姥呤留别
- 开放式漏洞评估语言(OVAL)概述
- hN大学数字逻辑电路期末考试 题详解