Question

如何使用addEventListener添加事件

Answer 1

火狐和其他浏览器都不支持,幸运的是他们都支持W3C标准的：
addEventListener和removeEventListener方法

形如：element.addEventListener(type,listener,useCapture);//添加事件
element.removeEventListener(type,listener,useCapture);//注销事件
这里需要和attchEvent相区别，event直接写事件名即可，如click事件->object.addEventListener("click",listener,useCapture);

例：
JS：
window.onload = function(){
var btn1 = document.getElementById("btn1");
btn1.addEventListener("click",test1,false);
var btn2 = document.getElementById("btn2");
btn2.addEventListener("click",function(){
btn1.removeEventListener("click",test1,false);
},false);
}
function test1(){
alert("111");
}
--------------------------------------------
html：
<button id="btn1">测试addEventListener</button>
<button id="btn2">测试removeEventListener</button>

-------------------------------------------------------------------------------
再将上面的例子改一下：
JS：
window.onload = function(){
var btn1 = document.getElementById("btn1");
btn1.addEventListener("click",test1,false);
btn1.addEventListener("click",test2,false);
btn1.addEventListener("click",test3,false);

var btn2 = document.getElementById("btn2");
btn2.addEventListener("click",function(){
btn1.removeEventListener("click",test1,false);
},false);
}
function test1(){
alert("111");
}
function test2(){
alert("222");
}
function test3(){
alert("333");
}
HTML：
<button id="btn1">测试addEventListener</button>
<button id="btn2">测试removeEventListener</button>

现象：页面打开之后，点击【测试addEventListener】，依次弹出"111","222","333"
说明，使用addEventListener添加事件后按照绑定顺序执行
再点击【测试removeEventListener】，则会发现不再弹“111”，即test1事件被注销

Answer 2

按照添加顺序相反的顺序触发; addEventListener是给非ie添加事件处理程序，接收三个参数，第一个是事件名，不需要加“on”