動態的添加事件：利用 attachEvent 和 addEventListener
IE 支持 attachEvent：
obj.attachEvent("onclick", Foo);
function Foo()
{
alert("測試");
}
或者：
obj.attachEvent("onclick", function(){alert("測試");});
其它瀏覽器支持 addEventListener：
obj.addEventListener("click", Foo, false);
function Foo()
{
alert("測試");
}
或者：
obj.addEventListener("click", function(){alert("測試");}, false);
注意： attachEvent 的事件帶 on，如 onclick，而 addEventListener 不帶 on，如 click。
綜合應用：
if (window.attachEvent) { //IE 的事件代碼 } else { //其它瀏覽器的事件代碼 }
下面說下addEventListener第三個參數以及應用。TRUE：事件捕獲階段，事件從最上一級標簽開始往下查找，直到捕獲到事件目標(target)。FALSE：事件冒泡階段：事件從事件目標(target)開始，往上冒泡直到頁面的最上一級標簽。
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function regEvent() {
document.getElementById('id1').addEventListener('click', function () { changeRed(); }, true);
document.getElementById('id2').addEventListener('click', function () { changeYellow(); }, true);
}
function changeRed() {
document.getElementById("p1").style.color = 'red';
}
function changeYellow() {
document.getElementById("p2").style.color = 'yellow';
}
</script>
</head>
<body>
<p id="p1">會變成紅色</p>
<p id="p2">會變成黃色</p>
<div id="id1" style="width:200px; height:200px; position:absolute; top:100px; left:100px; background-color:red; z-index:4">
<div id="id2" style="width:200px; height:200px; position:absolute; top:20px; left:70px; background-color:yellow; z-index:1"></div>
</div>
<button type="button" onclick="regEvent()">點擊</button>
</body>
</html>
注釋：雖然利用addEventListener進行了事件的注冊，但是有個問題就是在注冊事件完成后，點擊子div會觸發觸發父div的事件。下面是解救辦法：
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function regEvent() {
document.getElementById('id1').addEventListener('click', function () { changeRed(); }, false);//必須設為false
document.getElementById('id2').addEventListener('click', function () { changeYellow(this, event); }, false);//必須設為false
}
function changeRed() {
document.getElementById("p1").style.color = 'red';
}
function changeYellow(obj, evt) {
document.getElementById("p2").style.color = 'yellow';
if (window.event) {
evt.cancelBubble = true;//ie瀏覽器下阻止冒泡。cancelBubble不是w3c標准，只支持ie，stopPropagation現在也支持ie
} else {
evt.stopPropagation();//其它瀏覽器下阻止冒泡
}
}
</script>
</head>
<body>
<p id="p1">會變成紅色</p>
<p id="p2">會變成黃色</p>
<div id="id1" style="width:200px; height:200px; position:absolute; top:100px; left:100px; background-color:red; z-index:4">
<div id="id2" style="width:200px; height:200px; position:absolute; top:20px; left:70px; background-color:yellow; z-index:1"></div>
</div>
<button type="button" onclick="regEvent()">點擊</button>
</body>
</html>
stopPropagation() 方法：不再派發事件。終止事件在傳播過程的捕獲、目標處理或起泡階段進一步傳播。調用該方法后，該節點上處理該事件的處理程序將被調用，事件不再被分派到其他節點。
注釋：上例中addEventListener方法第三個參數必須設為false（冒泡狀態）。
preventDefault() 方法：取消事件的默認動作。該方法將通知 Web 瀏覽器不要執行與事件關聯的默認動作（如果存在這樣的動作）。例如，如果 type 屬性是 "submit"，在事件傳播的任意階段可以調用任意的事件句柄，通過調用該方法，可以阻止提交表單。注意，如果 Event 對象的 cancelable 屬性是 fasle，那么就沒有默認動作，或者不能阻止默認動作。無論哪種情況，調用該方法都沒有作用。下面是例子，取消了a標簽的跳轉功能。
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
function myself(e) {
alert('1');
e.preventDefault();
}
</script>
</head>
<body>
<a href="http://www.baidu.com" id="a1" onclick="myself(event)">百度</a>
</body>
參考：stopPropagation() 方法、js 事件冒泡、事件捕獲、stopPropagation、preventDefault、事件的canceBubble屬性