input元素的oninput事件和onchange事件

本文主要是介绍input元素的oninput事件和onchange事件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

1、input元素上绑定事件的三种方式：第一种：直接在元素标签上添加oninput属性，属性值为处理事件函数的调用<input type="text" id="input" οninput="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事件来替代

这篇关于input元素的oninput事件和onchange事件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---