js中怎么绑定事件

来源：互联网发布：淘宝网儿童帽子编辑：程序博客网时间：2024/05/02 11:49

我们想用两个window.onload的时候，起作用的其实是最后一个。就和变量一个道理，如果写 var a=5; a=9; 最后a是9；同学说，可以写到一个window.onload里面，但是实战项目中，我们都是分工合作的，每个人都想用自己的window.onload，这个时候就需要用到事件绑定了。

<script>
window.onload=function ()
{
alert('a');
};
window.onload=function ()
{
alert('b');
};
</script>

lIE方式

lattachEvent(事件名称, 函数)，绑定事件处理函数

ldetachEvent(事件名称, 函数)，解除绑定

lDOM方式

laddEventListener(事件名称,函数, 捕获)

lremoveEventListener(事件名称, 函数, 捕获)

下面我们看一个小例子，如何进行事件绑定：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
//attachEvent(事件名， 函数)
//IE
/*
oBtn.attachEvent('onclick', function ()
{
alert('a');
});
oBtn.attachEvent('onclick', function ()
{
alert('b');
});
*/
//FF
//addEventListener(事件名, 函数, false)
oBtn.addEventListener('click', function ()
{
alert('a');
}, false);
oBtn.addEventListener('click', function ()
{
alert('b');
}, false);
/*
oBtn.onclick=function ()
{
alert('a');
};
oBtn.onclick=function ()
{
alert('b');
};*/
};
</script>
</head>
<body>
<input id="btn1" type="button" value="按钮" />
</body>
</html>

js中好东西大都不兼容，我们的兼容写法：

<script>
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
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>

这个比较常用，我们封装成函数：

<script>
function myAddEvent(obj, ev, fn)
{
if(obj.attachEvent)
{
obj.attachEvent('on'+ev, fn);
}
else
{
obj.addEventListener(ev, fn, false);
}
}
window.onload=function ()
{
var oBtn=document.getElementById('btn1');
myAddEvent(oBtn, 'click', function (){
alert('a');
});
myAddEvent(oBtn, 'click', function (){
alert('b');
});
};
</script>

回到之前的问题，我们想用两个window.onload:

<script>
function myAddEvent(obj, ev, fn)
{
if(obj.attachEvent)
{
obj.attachEvent('on'+ev, fn);
}
else
{
obj.addEventListener(ev, fn, false);
}
}
myAddEvent(window,'load',function ()
{
alert('a');
});
myAddEvent(window,'load',function ()
{
alert('b');
});
</script>

0 0