attachEvent,addEventListener事件绑定

时间:2023-03-09 01:53:12
attachEvent,addEventListener事件绑定

兼容各主流浏览器的事件绑定(在同一个事件上添加多个处理函数)。

1.绑定方法:

 //IE attachEvent(事件名, 函数)
oBtn.attachEvent('onclick', aaa);
oBtn.attachEvent('onclick', bbb); //FF addEventListener(事件名, 函数, 是否捕获 false)
oBtn.addEventListener('click', aaa, false);
oBtn.addEventListener('click', bbb, false);

2.例子:

 <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function aaa(){
alert('a');
} function bbb(){
alert('b');
} window.onload=function (){
var oBtn=document.getElementById('btn1'); /*oBtn.onclick=aaa;
oBtn.onclick=bbb; 覆盖掉aaa*/ if(oBtn.attachEvent){
oBtn.attachEvent('onclick', aaa);
oBtn.attachEvent('onclick', bbb);
}
else{
oBtn.addEventListener('click', aaa, false);
oBtn.addEventListener('click', bbb, false);
}
};
</script>
</head> <body>
<input id="btn1" type="button" value="aaa" />
</body>
</html>

3.如何用于写一个用于时间绑定的公共函数

例子:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function bind(obj, evname, fn) {
if (obj.addEventListener) {
obj.addEventListener(evname, fn, false);
} else {
obj.attachEvent('on' + evname, function() {
fn.call(obj);
});
}
} function aaa(){
alert('a');
} function bbb(){
alert('b');
} window.onload=function (){
var oBtn=document.getElementById('btn1'); bind(oBtn, 'click', aaa);
bind(oBtn, 'click', bbb);
};
</script>
</head> <body>
<input id="btn1" type="button" value="aaa" />
</body>
</html>
4.解除绑定(以IE为例):
 <script type="text/javascript">
window.onload=function ()
{
var oBtn=document.getElementById('btn1'); //IE attachEvent/detachEvent
//FF addEventListener/removeEventListener
var a=function (){
alert('dafsdf');
}; oBtn.attachEvent('onclick', a);
oBtn.detachEvent('onclick', a);
};
</script>

注意:匿名函数解除不掉绑定(因为即使两个匿名函数长的一样,但是不是同一个函数)