大家好，又见面了，我是你们的朋友全栈君。
input元素的oninput事件和onchange事件
框架用多了，感觉原生的有点弱化了，不说了，是时候巩固一波了 ^ _ ^
1、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() {
// 处理事件代码
}
2、input元素的oninput事件和onchange事件的区别
oninput事件是在输入框中输入时就会触发
onchange事件是在输入框输入完内容后，输入框失焦后触发
onchange事件兼容性好，主流浏览器都支持
oninput事件IE9以下不支持，其余主流浏览器都支持，针对IE9以下的可以使用onpropertychange事件来替代
参考文献：
[1] oninput 事件
[2] input输入框的input事件和change事件
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-用户IM，转载请注明出处：https://javaforall.cn/135594.html原文链接：https://javaforall.cn
【正版授权，激活自己账号】： Jetbrains全家桶Ide使用，1年售后保障，每天仅需1毛
【官方授权 正版激活】： 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...
