JS事件绑定的两种形式

第一种：

obj.on*=function(){}

var btn=document.getElementById('myBtn');
btn.onclick=function(){
    alert(1);
}

这种方法是很常用，就是将一个函数赋值给一个事件处理程序。

它的优点是简单，然后具有跨浏览器的优势，现代所有浏览器都支持。

如果要取消这种形式绑定的事件，可以将事件处理程序属性的值设为null：

btn.onclick=null;  //删除事件处理程序

但是，这种形式的绑定有一个缺点，那就是不能在同一个对象上绑定两个事件，如下：

oDiv1.onclick=function(){
            alert(1);
        }
oDiv1.onclick=function(){
            alert(2);
        }                             //2

上面代码在同一对象上分别绑定了两个事件，结果只弹出2，是因为后面绑定的事件会覆盖前面的事件。

要想在一个对象上同时绑定两个事件或多个事件，就需要第二种绑定形式了。

 

 

第二种：

这种形式称为“DOM2级事件”,定义了两个方法：addEventListener()和removeEventListener()。

他们都接受3个参数：

第一个参数：要处理的事件类型名称；

第二个参数：处理程序的函数；

第三个参数：布尔值，表示是否捕获，true则为捕获，false则为冒泡。

例：

var btn=document.getElementById('myBtn');
btn.addEventListener('click',function(){
    alert(1);
},false);

通过addEventListener()添加的事件只能通过removeEventListener()来删除，

尤其注意的是，传入的匿名函数无法被删除，比如要删除上面代码绑定的事件，

btn.removeEventListener('click',function(){
    alert(1);
},false)

这样写是没有用的，看似删除的是同一个处理函数，但其实是两个不同的函数了，虽然长的一样。

所以通常这样写：

var btn=document.getElementById('myBtn');
var show=function(){
    alert(1);
}

btn.addEventListener('click',show,false);

//btn.removeEventListener('click',show,false);

同时，它可以在一个对象上绑定多个事件：

var show=function(){
    alert(1);
}
var show2=function(){
    alert(2);
}

btn.addEventListener('click',show,false);  //1
btn.addEventListener('click',show2,false);  //2

 

兼容：

addEventListener() 和 removeEventListener()不支持IE8及其以下版本，对于低版本IE，同样有两个方法：

attachEvent()  和  detachEvent(),他们各自接收两个参数：事件处理程序名称和事件处理函数。

因为IE8和更早版本只支持事件冒泡，所以通过这种方法添加的事件处理程序都会被添加到冒泡阶段。

var btn=document.getElementById('myBtn');
var show=function(){
    alert(1);
}

btn.attachEvent('onclick',show);

//btn.detachEvent('onclick',show);

同样，删除时也必须提供相同参数，即传入匿名函数不能被删除，如上写法正确。

注意事件类型名称，要加上‘on’。

同时，它也可以在一个对象上绑定两个事件，但结果略微不同：

var btn=document.getElementById('myBtn');
var show=function(){
    alert(1);
}
var show2=function(){
    alert(2);
}

btn.attachEvent('onclick',show);   //1
btn.attachEvent('onclick',show2);  //2

在IE8及其以下版本，可以执行这段代码，但弹出结果是倒序的，即先弹出2，再弹出1。

我在IE9和IE10下测试，弹出结果又是正序的，先弹出1，再弹出2。

IE11不支持这个方法，同样Chrome和火狐也不支持。

 

总结！！！

标准浏览器（含ie）： obj.addEventListener(事件名称，事件函数，是否捕获)

1.有捕获

2.事件名称没有on

3.事件执行的顺序是正序

4.this指向触发该事件的对象

 

ie: obj.attachEvent(事件名称，事件函数)

1.没有捕获

2.事件名称有on

3.事件函数执行的顺序：标准ie正序，非标准ie倒序

4.this指向window

 

关于this问题，可以通过call()方法修改。