非IE下,注意事件名不帶on,如onclick為click
添加事件:DOM對象.addEventListener('事件名',函數名,true/false);
刪除事件:DOM對象.removeEventListener('事件名',函數名,true/false);
第三個參數是useCapture,如果為true,瀏覽器采用capture截獲處理事件順序;如果為false,瀏覽器采用bubbing冒泡方式處理事件順序
一般為false
給個例子,可以自己修改true或false來看效果:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> </head> <body> <div id="div_test">div_test <input type="button" id="btn_test" value="btn_test"/> </div> <script type="text/javascript"> window.onload = function () { document.getElementById("div_test").addEventListener("click", test1, false); document.getElementById("btn_test").addEventListener("click", test2, false); } function test1() { alert("外層div觸發") } function test2() { alert("內層input觸發") } </script> </body> </html>
IE下,事件名不能去on了,正常寫
添加事件:DOM對象.attachEvent('事件名',函數名);
刪除事件:DOM對象.detachEvent('事件名',函數名);
注意,綁定事件和刪除事件的函數名必須一致,而且不能使用匿名函數,匿名函數不能指定函數名
常用代碼如下:

//綁定事件 if (typeof document.addEventListener != "undefined") { document.addEventListener("mousedown",_lhlclick,true); } else { document.attachEvent("onmousedown",_lhlclick); } //解除綁定事件 if (typeof document.addEventListener != "undefined") { document.removeEventListener("mousedown",_lhlclick,true); } else { document.detachEvent("onmousedown",_lhlclick); }