區(qū)別十分簡單圃郊,直接看代碼吧
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<button id="btn">button</button>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function () {
alert('普通事件1');//不執(zhí)行
}
btn.onclick = function () {
alert('普通事件2');//彈出
}
// 上面用普通方法添加兩個事件项栏,下面用事件綁定添加兩個事件掀抹。
btn.addEventListener('click', function () {
alert('事件綁定1');//彈出
},false);
btn.addEventListener('click', function () {
alert('事件綁定2');//彈出
},false);
//注意我這里只使用W3C的標準寫法添加事件,沒有兼容低版本的IE伊诵。
</script>
</body>
</html>
上面代碼執(zhí)行后依次會彈出:普通事件2单绑、事件綁定1、事件綁定2曹宴。
總結:普通事件中的onclick是DOM0級事件只支持單個事件搂橙,會被其他onclick事件覆蓋,而事件綁定中的addEventListener是DOM2級事件可以添加多個事件而不用擔心被覆蓋浙炼,孰優(yōu)孰略份氧,聰明的你一定知道了吧。