Firefox : addEventListener()方法
IE : attachEvent()方法
为HTML元素添加一个事件监听, 而不是直接对元素的事件属性（如：onclick、onmouSEOver）赋值。
为HTML元素添加一个事件监听:1.利用元素事件属性添加事件处理函数2.attachEvent方法添加事件处理函数
这两种方法处理事件还是有很大区别的！事件属性只能赋值一种方法，即：
button1.onclick = function() { alert(1); };button1.onclick = function() { alert(2); };这样后面的赋值语句就将前面的onclick属性覆盖了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>Javascript事件监听示例</title></head><body><button id="Button1">测试</button><script type="text/javascript">/// <summary>/// 添加事件监听/// </summary>/// <param name="target">载体</param>/// <param name="type">事件类型</param>/// <param name="func">事件函数</param>function addEventHandler(target, type, func) { if (target.addEventListener) target.addEventListener(type, func, false); else if (target.attachEvent) target.attachEvent("on" + type, func); else target["on" + type] = func;}
/// <summary>/// 移除事件监听/// </summary>/// <param name="target">载体</param>/// <param name="type">事件类型</param>/// <param name="func">事件函数</param>function removeEventHandler(target, type, func) { if (target.removeEventListener) target.removeEventListener(type, func, false); else if (target.detachEvent) target.detachEvent("on" + type, func); else delete target["on" + type];}
var Button1 = document.getElementById("Button1");var Button1Click = function() { alert(1); };addEventHandler(Button1, "click", Button1Click);addEventHandler(Button1, "click", function() { alert(2); } );addEventHandler(Button1, "click", function() { alert(3); } );
removeEventHandler(Button1, "click", function() { alert(2); } ); // 移不出removeEventHandler(Button1, "click", Button1Click); // 可以移除</script></body></html>而添加事件监听就可以并行。
特别是当团队合作时，事件并行的需求增多，比如：监听document对象的鼠标事件或者window对象的载入事件等。使用事件属性则会造成事件覆盖掉(第二次会覆盖第一次的)。
添加事件监听:不仅可以对同一事件添加多个处理函数对象，而且不会彼引覆盖，也不会覆盖通过属性添加的函数对象。他们会按序运行，在IE中：先添加的后运行，而在FF中先添加的先运行。
经过测试IE(8)中先显示3再显示2，而firefox(3)中则先显示2再显示3
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Javascript事件监听</title> </head> <body> <button id="Button1"> 测试 </button> <script type="text/javascript"> function addEventHandler(target, type, func){ if (target.addEventListener) target.addEventListener(type, func, false); else if (target.attachEvent) target.attachEvent("on" + type, func); else target["on" + type] = func; } function removeEventHandler(target, type, func){ if (target.removeEventListener) target.removeEventListener(type, func, false); else if (target.detachEvent) target.detachEvent("on" + type, func); else delete target["on" + type]; } var Button1 = document.getElementById("Button1"); Button1.onclick = function(){ alert("addByAttr1"); } Button1.onclick = function(){ alert("addByAttr2"); } var Button1Click = function(){ alert(1); }; addEventHandler(Button1, "click", Button1Click); addEventHandler(Button1, "click", function(){ alert(2); }); addEventHandler(Button1, "click", function(){ alert(3); }); removeEventHandler(Button1, "click", function(){ //移不出(原因：此处为一个新的匿名对象，其实是移除了该匿名对象) alert(2); }); removeEventHandler(Button1, "click", Button1Click);//能移除(原因：此处为对象引用，移除引用对象) </script> </body></html>
JS监听关闭浏览器事件:http://wenku.baidu.com/view/4158f76aaf1ffc4ffe47ac67.html
新闻热点
疑难解答
