失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > input元素的oninput事件和onchange事件

input元素的oninput事件和onchange事件

时间:2023-02-18 00:02:24

相关推荐

input元素的oninput事件和onchange事件

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事件

如果觉得《input元素的oninput事件和onchange事件》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。