js中的事件绑定

1、事件绑定
   
事件是用户或浏览器自身进行的特定行为.这些事件都有自己的名字,如click(点击),load(载入),mouseover(鼠标经过).用于响应某个事件而调用的函数称为"事件处理函数"或者"事件监听函数".事件处理函数有两种分配方式:

1)在HTML页面中:

<div onclick="doSome()" />//点击后执行JS代码中已经定义好的函数:doSome;

2)在JS中:

var oDiv = document.getElementById("testDiv");
oDiv.onclick = function(){
alert("我被点!");
}

2、应用

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

首先，我们来看下面的代码：

<span style="font-size:18px;"><script type="text/javascript">
window.onload=function (){
alert('a');
};
window.onload=function (){
alert('b');
<};
</script></span>

在上面的两个window.onload事件中，待程序执行完的时候，弹出的只有“b”，why？因为在程序运行中，当第一个事件加载后运行完就开始加载第二个事件，所有就只能看到第二个事件所产生的结果。如果两个都想要看到，那么就需要用到事件的绑定了。

在看下面代码：

<script type="text/javascript">
window.onload = function() {
var oBtn = document.getElementById('btn');

oBtn.attachEvent('onclick', function() {
alert('a');
});
oBtn.attachEvent('onclick', function() {
alert('b');
});
};
</script>

在这里我们就对oBtn对象就行绑定addEventListener，在点击之后都可以显示出“a”和“b”。但又出现了问题，那就是兼容性问题，下面是进行处理后代码：

<script type="text/javascript">
window.onload = 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>

这个就是比较完整的代码了，但是有想到代码过多，所以我们可以把他封装一下：

<script type="text/javascript">
function addEvent(obj, ev, fn) {
//IE起作用
if(obj.attachEvent) {
obj.attachEvent('on' + ev, fn);
}
//非IE起作用
else {
obj.addEventListener(ev, fn, false);
}
}
window.onload = function() {
var oBtn = document.getElementById('btn');

addEvent(oBtn, 'click', function() {
alert('a');
});
addEvent(oBtn, 'click', function() {
alert('b');
});
}
</script>

那么两个load加载就能解决了：

<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>