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