[html] 第148天 input的onblur和onchange事件区别是什么？
haizhilin2013 opened this issue · comments
第148天 input的onblur和onchange事件区别是什么？
onchange是指值改变并且失去焦点时触发的事件
onblur失去焦点时就触发，不管值有没有改变
onchange是内容改变事件，onblur是失去焦点事件
onchange 是当input内容发生改变且失去焦点
onblur 是失去焦点就会触发
<body>
<input type="text" id="a" placeholder="onchange" onchange="onfun()">
<input type="text" id="b" placeholder="onblur" onblur="onblu()">
<script>
function onfun() {console.log('onchange')}
function onblu() { console.log('onblur') }
</script>
</body>
ios onblur 有时候并不你那个预期触发
onchange需要失去焦点吗?我怎么记得是value改变就会出发
onchange需要失去焦点吗?我怎么记得是value改变就会出发
value改变马上就触发的是input事件，change事件确实要等blur之后才会触发。
onblur在input失去焦点时候触发。与之对应的是onfocus事件。无论input是否有值、值是否有变化，都会触发。onchange在input发生变化然后在失去焦点的时候触发。且先于onblur触发。onchange只有在input的值必须与前一次输入不同才会触发。
一个简单的小例子: https://codepen.io/Konata9/pen/oNvdWeG?editors=1111
onchange事件：当元素值发生改变，并且焦点失去时，才会被触发。- ```onblur
事件：当失去焦点时，即被触发。与事件onfocus相对应，当对象获得焦点时，onfocus`事件被触发。
onchange需要失去焦点吗?我怎么记得是value改变就会出发
那个是react
- oninput：表单内容变化即触发
- onchange：表单内容变化且失去焦点即触发
- onfocus：表单获得焦点触发，readonly适用
- onblur：失去焦点即触发，readonly适用
<body>
<div class="container">
<input type="text" oninput="handleOninput()" onchange="handleOnchange()" onfocus="handleOnfocus()" onblur="handleOnblur()" />
</div>
<script>
function handleOninput() {
console.log('oninput：' + +new Date())
}
function handleOnchange() {
console.log('onchange：' + +new Date())
}
function handleOnfocus() {
console.log('onfocus：' + +new Date())
}
function handleOnblur() {
console.log('onblur：' + +new Date())
}
</script>
</body>
onchange需要失去焦点吗?我怎么记得是value改变就会出发
value改变马上就触发的是
input事件，change事件确实要等blur之后才会触发。
哈哈哈我也是这个觉得，后来一试发现真的，都是被antd给害得已经习惯了