JavaScript中，四种事件绑定方法及attachEvent与addEventListener的区别

我们在对事件进行绑定的时候，除了常用的对元素对象后面通过点加属性来事件绑定，如：

a.onclick = function(){
    //code
}

我们还能通过attachEvent和addEventListener来进行事件绑定，这两个方法是有区别的，前者的这个方法是用在ie6到8的浏览器那里，而后者的方法是用在除了ie6到8的其他浏览器里。这两个方法对于浏览器的兼容来说比较重要，并且除此之外这两个方法都有对应的解除事件绑定的方法如：detachEvent和removeEventListener，而上面的代码中这种声明绑定事件的方法因为是匿名函数，所以是无法解除绑定的，并且上面的代码它不能在同一个元素对象的同一个事件添加多个方法，如果对同一个元素对象的同一个事件添加多个方法了，那么它只是运行最后的那一个函数。而上面的两个函数则可以在同一个元素对象的同一个事件添加多个方法。如：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset = 'utf-8'>
    </head>
    <body>
        <button id = 'a'>aaa</button>
        <button id = 'b'>bbb</button>
    </body>
    <script>
        var a = document.getElementById('a')
        var b = document.getElementById('b')
        a.onclick = function() {
            alert('a')
        }
        a.onclick = function() {
            alert('a')
        }
        if(b.addEventListener) {
            b.addEventListener(click, function() {
                    alert('a')
            })
            b.addEventListener(click, function() {
                    alert('b')
            })
        }
        else {
            b.attachEvent(onclick, function() {
                    alert('a')
            })
            b.attachEvent(onclick, function() {
                    alert('b')
            })
        }
    </script>
</html>

相信各位从代码里能更深入的了解attachEvent和addEventListener的区别，在他们的方法里，attachEvent的事件名是要加on前缀的，而addEventListener的事件名不用加前缀。在ie8和火狐下运行的时候能发现，attachEvent方法跳出顺序是b到a，而火狐的与之相反。因为attachEvent是类似栈的先进后出，即第一个方法最后执行，而addEventListener是类似队列的先进先出即第一个方法先执行。他与之对应的删除绑定事件的方法用法如下：

function myAddEvent (obj, ev, fn) {
	if (obj.addEventListener) {
		obj.addEventListener(ev, fn, false)
	}
	else {
		obj.attachEvent('on'+ev, fn)
	}
}
var a = document.getElementById('btn')
var b= document.getElementById('btn1')
myAddEvent(a, 'click', aa)
myAddEvent(a, 'click', bb)
function aa(){
	alert('a')
}
function bb(){
	alert('b')
}
b.onclick = function() {
	if(a.removeEventListener)
		a.removeEventListener('click', aa)
	else
		a.detachEvent('onclick',aa)
}

那么既然用a.onclick = function(){}方法不能解除绑定，那么我们应该怎么样才能使得它能解除绑定呢？这里介绍第四种绑定事件的方法，不过W3C标准已经不提倡使用，因为现在前端要求的是HTML和js代码要分离。第四种方法写法如下：

<button id = 'a' onclick = 'ha()'>aaa</button>

想要解除绑定则通过removeAttribute来将onclick这个属性给去掉即可：

var a = document.getElementById('a')
a.removeAttribute('onclick')

JavaScript中，四种事件绑定方法及attachEvent与addEventListener的区别

猜你喜欢