事件绑定
oBtn.onclick=function(){};
oBtn.onclick=function(){}; 直接参数式添加事件会覆盖
<button type="button" id="btn1">按钮</button>
<script>
let oBtn=document.getElementById('btn1');
oBtn.onclick=function (){
alert('a');
};
//这么去添加事件，当一个事件多次出现时就会覆盖
oBtn.onclick=function (){
alert('b');
}
</script>
addEventListener
事件绑定新朋友： addEventListener 多个事件可以共存
基本语法：
addEventListener('（不on的）事件名','function(){}');
addEventListener('（不on的）事件名','function(){}',false);
addEventListener里面的false现在一般情况下不需要写，除非你要兼容一些特别老版本的火狐什么的游览器才需要加上
<button type="button" id="btn1">按钮</button>
<script>
let oBtn=document.getElementById('btn1');
oBtn.addEventListener('click',function (){
alert('a');
},false);
oBtn.addEventListener('click',function (){
alert('b');
},false);
</script>
注：addEventListener只能兼容高级游览器以及IE9+
IE9一下的版本解决方法：attachEvent ie专用的函数，其他游览器无效
attachEvent基本语法：
attachEvent('（带on的）事件名','function(){}')
attachEvent里只需要事件名和函数，不需要false
<button type="button" id="btn1">按钮</button>
<script>
// let oBtn=document.getElementById('btn1');
// ie9 一下不支持let变量
var oBtn=document.getElementById('btn1');
oBtn.attachEvent('onclick',function (){
alert('a');
});
oBtn.attachEvent('onclick',function (){
alert('b');
});
</script>
事件绑定高低游览器都兼容的方法
<button type="button" id="btn1">按钮</button>
<script>
// let oBtn=document.getElementById('btn1');
var oBtn=document.getElementById('btn1');
console.log(oBtn.addEventListener);
console.log(oBtn.attachEvent);
//打印出来可以发现oBtn.addEventListener在高级游览器里可以正常显示，oBtn.attachEvent则为undefined
//oBtn.attachEvent则恰恰相反
// 这时候，我们就可以给它判断真假的方法去处理兼容
// 在高级游览器里，oBtn.addEventListener它是一个函数，不是为空的，所以它就为真，就执行if里面的代码
if (oBtn.addEventListener){
oBtn.addEventListener('click',function (){
alert('a');
});
}else{
//反之就执行else里的
oBtn.attachEvent('onclick',function (){
alert('b');
});
}
</script>