事件绑定demo——attachEvent/addEventListener

最新推荐文章于 2022-03-23 10:01:35 发布

FE焱黑C

最新推荐文章于 2022-03-23 10:01:35 发布

阅读量370

点赞数

文章标签： attachEventaddEventL web前端js代码

本文链接：https://blog.csdn.net/qq_36771997/article/details/73480215

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
#btn{width: 100px;height: 100px;background: red;}
</style>
<script>
window.οnlοad=function(){

var oBtn=document.getElementById('btn');

//常识代码;

// if(oBtn.attachEvent){
// oBtn.attachEvent('onclick',function(){
// this.style.width=200+'px';
// this.style.height=200+'px';
// });
// oBtn.attachEvent('onclick',function(){
// this.style.backgroundColor='blue';
// });
// }
// else{
// oBtn.addEventListener('click',function(){
// this.style.width=200+'px';
// this.style.height=200+'px';
// alert('a');
// },false);
// oBtn.addEventListener('click',function(){
// this.style.backgroundColor='blue';
// alert('b');
// },false);

// }

//利用函数,面向对象法，对代码进行优化,需要注意的是attachEvent事件和addEventListener 一个是在IE下兼容一个是在Chrome和FF下兼容，对事件的写法一个需要+on如onclick，一个不需要加‘on’如click,所以在函数传参时ev写不用加on的事件.

myAddEvent(oBtn,'click',function(){
oBtn.style.width=200+'px';
oBtn.style.height=200+'px';
alert('a');
});
myAddEvent(oBtn,'click',function(){
oBtn.style.backgroundColor='blue';
alert('b');
});

}
function myAddEvent(obj,ev,fn){
if(obj.attachEvent){
obj.attachEvent('on'+ev,fn);
//detachEvent 解除绑定 IE下
}
else{
obj.addEventListener(ev,fn,false);
//removeEventListener 解除绑定 Chrome火狐下
}
}
</script>
<body>
<div id="btn"></div>
</body>

</html>