onclick与addEventListener实际上可分为：Inline events与Event Listeners
Event Listeners (addEventListener and IE‘s attachEvent)
相同点：都是时间监听器。
不同点如下：
1.使用浏览器的差别
addEventListener：
很多浏览器支持addEventListener(IE9及以上也支持)，使用方式如下：
var target = document.getElementById("test");
target.addEventListener(‘click‘,test,false);
function test(){
alert("test");
}
attachEvent：
IE中提供了类似addEventListener的事件监听器：attachEvent。在IE众多版本都支持，本人已测试过IE6-10。
使用方式如下：
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!‘); }
);