原文出处：http://blog.163.com/m13864039250_1/blog/static/21386524820144155526737/
addEventListener的参数一共有三个，语法为：
element.addEventListener(type,listener,useCapture)
下面是详解
- 其中element是要绑定函数的对象。
- type是事件名称，要注意的是"onclick"要改为"click","onblur"要改为"blur",也就是说事件名不要带"on"。
- listener当然就是绑定的函数了，记住不要跟括号
- 最后一个参数是个布尔值，表示该事件的响应顺序,下面重点介绍一下addEventListener的第3个参数(useCapture)。
userCapture若为true,则浏览器采用Capture,若为false则采用bubbing方式。建议用false,看个例子吧。（冒泡与捕获具体参考这里）
//对于IE浏览器不支持addEventListener
if (window.addEventListener) {
alert("支持addEventListener");
} else {
alert("不支持addEventListener");
}
//对于Google浏览器不支持attachEvent
if (window.attachEvent) {
alert("支持attachEvent");
} else {
alert("不支持attachEvent");
}
//IE下注册onLoad事件(先注册后触发)
window.attachEvent("onload", funcOne);
window.attachEvent("onload", funcTwo);
//Google浏览器下注册onload事件（先注册先触发）
window.addEventListener('load', funcOne, false);
window.addEventListener('load', funcTwo, false);
function funcOne() {
alert("funcOne");
}
function funcTwo() {
alert("funcTwo");
}
<script type="text/javascript">
window.onload = function () {
var btnOne = document.getElementById("btnOne");
//IE下注册事件，先注册后触发
//btnOne.attachEvent("onclick", funcOne);
//btnOne.attachEvent("onclick", funcTwo);
//Goole下注册事件,(先注册先触发)
btnOne.addEventListener('click', funcOne, false);
btnOne.addEventListener('click', funcTwo, false);
}
function revmoeClick() {
var btnOne = document.getElementById("btnOne");
//IE下取消注册
//btnOne.detachEvent("onclick", funcOne);
//btnOne.detachEvent("onclick", funcTwo);
//Goole下取消注册事件
btnOne.removeEventListener('click', funcOne, false);
btnOne.removeEventListener('click', funcTwo, false);
}
function funcOne() {
alert("funcOne");
}
function funcTwo() {
alert("funcTwo");
}
</script>
</head>
<body>
<input type="button" id="btnTwo" value="取消注册事件" onclick="revmoeClick()"/>
<hr />
<input type="button" id="btnOne" value="事件按钮"/>
</body>
</html>