详解javascript事件绑定使用方法
由于html是从上至下加载的，通常我们如果在head部分引入javascript文件，那么我们都会在javascript的开头添加window.onload事件，防止在文档问加载完成时进行DOM操作所出现的错误。如果有多个javascript文件，那么极有可能出现多个window.onload事件，但是最后起作用的只有一个，这时候就需要使用事件绑定来解决这个问题了。
IE方式
attachEvent(事件名称,函数)，绑定事件处理函数
detachEvent(事件名称,函数)，解除绑定
DOM方式
addEventListener(事件名称,函数,捕获)
removeEventListener(事件名称,函数,捕获)
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function()
{
varoBtn=document.getElementById('btn1');
oBtn.onclick=function()
{
alert('a');
};
oBtn.onclick=function()
{
alert('b');
};
};
</script>
</head>
<body>
<inputid="btn1"type="button"value="按钮"/>
</body>
</html>
这段代码，运行结果是弹出b，因为有两个oBtn的点击事件，但是只执行了最后一个，这时候就体现出事件绑定的重要性了。
<!DOCTYPEHTML>
<html>
<head>
<metacharset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function()
{
varoBtn=document.getElementById('btn1');
//IE浏览器
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>
<inputid="btn1"type="button"value="按钮"/>
</body>
</html>
当你使用事件绑定的时候，那么两次点击事件都会执行，只是执行顺序在不同浏览器是不同的。在IE中是自下而上执行，而在其他浏览器中是自上而下，不过由于alert的特殊性我们可以看出差别，其他语句基本等同于没有差别，但是在对于一些对时间要求严格是事件的使用时还是需要注意的，比如之前有一篇文章图片轮播中的setInterval对时间的细微的差别最后导致滚动混乱。基于原生javascript的图片轮播domo
最后将我们的代码整理成函数，便于之后的使用
functionmyAddEvent(obj,ev,fn)
{
if(obj.attachEvent)
{
obj.attachEvent('on'+ev,fn);
}
else
{
obj.addEventListener(ev,fn,false);
}
}
这时候如果需要使用多个window.onload事件其实就和使用多个oBtn.onclick事件差不多了。如下调用函数即可。
myAddEvent(window,'load',function()
{
alert('a');
});
myAddEvent(window,'load',function()
{
alert('b');
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。