最近更新
阅读排行
读过本文章的之前读了
关注本站
JS的监听事件
阅读：10695 次 编辑日期：2014-02-25
目录：
概述：
最近开始研究移动端的一些事件是如何实现的，所以先做个铺垫，今天跟大家讲讲事件监听addEventListener和attachEvent的用法。
addEventListener的使用方式：
函数使用格式
target.addEventListener(type, listener, useCapture);
target： 文档节点、document、window。
type： 字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。
listener ：调用的函数。
useCapture ：是否使用捕捉，一般用 false，如果不写，默认为false。
type： 字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。
listener ：调用的函数。
useCapture ：是否使用捕捉，一般用 false，如果不写，默认为false。
attachEvent的使用方式：
函数使用格式
target.attachEvent(type, listener);
target： 文档节点、document、window。
type： 字符串，事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。
listener ：调用的函数。
type： 字符串，事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。
listener ：调用的函数。
两者的区别：
1.适应的浏览器版本不同：
addEventListener方法 按钮click Mozilla中使用
attachEvent方法 按钮onclick IE中使用
2.执行顺序不一样：
HTML：//点击区域JS:// document.getElementById("btn").onclick = Fun1; document.getElementById("btn").onclick = Fun2; document.getElementById("btn").onclick = Fun3; function Fun1(){ alert("Fun1"); } function Fun2(){ alert("Fun2"); } function Fun3(){ alert("Fun3"); }
上面的代码只执行Fun3，结果只有alert("Fun3");
HTML：//点击区域JS:// var thisId = document.getElementById("btn"); thisId.attachEvent("onclick",Fun1); thisId.attachEvent("onclick",Fun2); thisId.attachEvent("onclick",Fun3); function Fun1(){ alert("Fun1"); } function Fun2(){ alert("Fun2"); } function Fun3(){ alert("Fun3"); }
上面的执行顺序为Fun3->Fun2->Fun1。
HTML：//点击区域JS:// var thisId = document.getElementById("btn"); thisId.addEventListener("click",Fun1); thisId.addEventListener("click",Fun2); thisId.addEventListener("click",Fun3); function Fun1(){ alert("Fun1"); } function Fun2(){ alert("Fun2"); } function Fun3(){ alert("Fun3"); }
上面的执行顺序为Fun1->Fun2->Fun3。
