onchange 当内容被改变且失去焦点后触发
oninput 当内容被改变时持续触发
请看以下代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="t" value="">
<script type="text/javascript">
var d = document.getElementById('t');//获取input标签
//当内容改变且失去焦点时触发
d.onchange = function(){
console.log('onchange');
}
//当内容改变时触发
d.oninput = function(){
console.log('oninput');
}
</script>
</body>
</html>
以上，我们给input标签绑定了onchange和oninput事件。
当鼠标点击input内部获得焦点，然后再点击input外部失去焦点，onchange和oninput事件全部不会触发。
当在input输入内容时持续触发oninput事件。
当在input输入内容后，再点击input外部，input失去时onchange触发了。
大家亲自动手测试一下以加深印象。
|
窥视卡
雷达卡
发表于 2023-1-24 19:50:49
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-19 11:33:09
