oninput 和 onchange
来源：4-1 地图搜索（1）
爱吃夜宵的前端Student
2020-08-21 18:43:29
oninput 和 onchange 的区别
我使用 oninput，每次打拼音的时候 比如"bei jing" 会触发8次 oninput事件
使用onchange不会出现这种情况
但是为什么视频中老师演示的可以使用 oninput且不会出现我说的那种情况呢？
-----------------------js-----------------------
var map = new AMap.Map('container', {
zoom:10, //初始地图级别
center:[120,30] //初始化地图中心
});
// 加载插件 地图加载完毕就会触发回调函数
AMap.plugin('AMap.Autocomplete',function(){
search.onchange= function(){
new AMap.Autocomplete().search(this.value, function(status,data){
console.log(data);
})
}
})---------------------html---------------------------------
<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>高德地图</title> <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=bc5aa7faaf9db504d581d85546338c51"></script> <link rel="stylesheet" href="./css/map.css" type='text/css'> </head> <body> <div id="container"></div> <div id="operateNode"> <input type="text" name="" id="search"> </div> <script src="./js/map.js" type='text/javascript'></script> </body> </html>
------------------css--------------------------
*{
margin:0;
padding:0;
}
input{
outline: none;
}
#container{
width:100%;
height:100%;
position: absolute;
left: 0;
top: 0;
}
#operateNode{
width: 300px;
height: 100px;
position: absolute;
right: 20px;
top: 20px;
z-index: 99;
border: 1px solid #000;
box-shadow: 0 0 5px #000;
background-color: #fff;
}写回答
1回答
-
好帮手慕夭夭
2020-08-21
同学你好，问题解答如下：
1.oninput 和 onchange 的区别就是：oninput事件是在元素值发生变化时立即触发，而onchange事件是在元素失去焦点时触发。所以你输入一次内容，就会触发一次oninput。例如输入123，那么输入了3次，就会触发3次。而onchange只会在输入完123,失去焦点触发一次。
2.课程中，老师在演示时，也是触发了多次。如下图所示。可以回顾一下视频哦
老师输入了3次，所以触发了3次。
同学测试的结果没有问题。
如果我的回答帮到了你，欢迎采纳，祝学习愉快~
0
相似问题