JS事件绑定的两种形式

Posted 2020-10-01 黑色瓶子

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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