js：怎么使用事件的绑定

最新推荐文章于 2023-03-16 10:33:39 发布

dzahao

最新推荐文章于 2023-03-16 10:33:39 发布

阅读量1k

点赞数

分类专栏：事件文章标签： javascript 事件封装

本文链接：https://blog.csdn.net/dzahao/article/details/52798655

版权

事件专栏收录该内容

2 篇文章 0 订阅

订阅专栏

在工作中，我们是分工合作的，每个人负责不同的项目，当我们对同一个对象使用同一个事件时，根据顺序结构，起作用的是最后一个，这和变量的声明是一样的，可以理解为前面的被后面的覆盖了，那么这时候我们就可以用事件的绑定，使他们两个都都起作用。

事件绑定用到的代码是有兼容性的，我们先来看看IE的：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script type="text/javascript">
window.οnlοad=function(){
var oBtn=document.getElementById('btn');

oBtn.attachEvent('onclick',function(){
alert('a');
})
oBtn.attachEvent('onclick',function(){
alert('b');
})
</script>
</head>
<body>
<input type="button" name="btn" id="btn" value="点击" />
</body>
</html>

这样写法会先出现b，后出现a，在真正使用时就要注意顺序

再来看看其他浏览器的

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script type="text/javascript">
window.οnlοad=function(){
var oBtn=document.getElementById('btn');

oBtn.addEventListener('click',function(){
alert('a');
},false)
oBtn.addEventListener('click',function(){
alert('b');
},false)
}
</script>
</head>
<body>
<input type="button" name="btn" id="btn" value="点击" />
</body>
</html>

这个与IE不同之处就是顺序并不会出现调转

接下来便是两种写法的合并，令他们兼容所有浏览器：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件绑定</title>
<script type="text/javascript">
window.οnlοad=function(){
var oBtn=document.getElementById('btn');

if(oBtn.attachEvent){
oBtn.attachEvent('onclick',function(){
alert('a');
})
oBtn.attachEvent('onclick',function(){
alert('b');
})
}
else{
oBtn.addEventListener('click',function(){
alert('a');
},false)
oBtn.addEventListener('click',function(){
alert('b');
},false)
}
}
</script>
</head>
<body>
<input type="button" name="btn" id="btn" value="点击" />
</body>
</html>

然而仔细看，两段代码其实有共同之处，差别之处在于一个是attachEvent，一个是addEventListener，一个有on，一个无on，一个无false，一个有false，我们来试试将他们封装起来，方便以后调用

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件绑定的函数封装</title>
<script type="text/javascript">
function addEvent(obj,ev,fn){
if(obj.attachEvent){
obj.attachEvent('on'+ev,fn);
}
else{
obj.addEventListener(ev,fn,false);
}
}
window.οnlοad=function(){
var oBtn=document.getElementById('btn');
addEvent(oBtn,'click',function(){
alert('a');
})
addEvent(oBtn,'click',function(){
alert('b');
})
}
</script>
</head>
<body>
<input type="button" name="btn" id="btn" value="点击" />
</body>
</html>