onclick与addEventListener的区别

onclick与addEventListener实际上可分为：Inline events与Event Listeners

 

 

Event Listeners (addEventListener and IE's attachEvent)

 

相同点：都是时间监听器。

不同点如下：

1.使用浏览器的差别

addEventListener：

很多浏览器支持addEventListener(IE9、IE10、IE11、chrome、firefox、opera、safari支持)，使用方式如下：

var target = document.getElementById("test");
target.addEventListener('click',test,false);
function test(){
        alert("test");
}

 

attachEvent：

IE中提供了类似addEventListener的事件监听器：attachEvent。（IE7、IE8支持）。

使用方式如下：

var target = document.getElementById("test");
target.attachEvent('onclick',test);
function test(){
     alert("test");
}

 

2.参数差别

addEventListener和attachEvent除了使用浏览器的差别，还有参数的差别。addEventListener中有第3个参数，attachEvent没有。第3个参数传递的是false或true。这个参数可选，默认是false。

false--表示事件处理将在冒泡阶段执行。

true--表示事件处理将在捕获阶段执行。

 

 

理论上，Event Listeners (addEventListener and IE's attachEvent)可以无限增加事件监听给某个一元素。实际应用的约束就是客户端内存的限制，这一点因每个浏览器而异。

 

 

Inline events (HTML onclick="" property and element.onclick)

使用方式：

1.

<a id="testing" href="#" onclick="alert('did stuff inline');">点我</a>

 

2.

<a id="test" href="#">点我</a>

 

var element = document.getElementById('test');
element.onclick = function () { alert('did stuff #1'); };

 

 

Inline events与Event Listeners的区别：Event Listeners可以添加无数个(理论上)事件，Inline events只能添加1个事件，且下面的会覆盖上面的。例如：

 

<a id="test" href="#">点我</a>

var element = document.getElementById('test');
element.onclick = function () { alert('did stuff #1'); };

element.onclick = function () { alert('did stuff #2'); };

结果是：did stuff #2

 

总结起来，建议使用下面形式：

function addEvent(element, evnt, funct){
        if (element.attachEvent)
            return element.attachEvent('on'+evnt, funct);
        else
            return element.addEventListener(evnt, funct, false);
    }

    addEvent(
            document.getElementById('myElement'),
            'click',
            function () { alert('hi!'); }
    );