addEventListener和addListener的区别

addListener是用于鼠标，键盘等特殊元素的一些监听

addEventListener是对组件监听的

(要注意的是div必须放到js前面才行) 一般情况下，如果给一个dom对象绑定同一个事件，只有最后一个会生效，比如：

复制代码 代码如下:

document.getElementById("btn").onclick = method1; document.getElementById("btn").onclick = method2; document.getElementById("btn").onclick = method3;

那么将只有method3生效。 如果是Mozilla系列，用addEventListener可以让多个事件按顺序都实现，比如：

复制代码 代码如下:

var btn1Obj = document.getElementById("btn1"); //element.addEventListener(type,listener,useCapture); btn1Obj.addEventListener("click",method1,false); btn1Obj.addEventListener("click",method2,false); btn1Obj.addEventListener("click",method3,false);

执行顺序为method1->method2->method3 如果是ie系列，用attachEvent可以让多个事件按顺序都实现，比如：

复制代码 代码如下:

var btn1Obj = document.getElementById("btn1"); //object.attachEvent(event,function); btn1Obj.attachEvent("onclick",method1); btn1Obj.attachEvent("onclick",method2); btn1Obj.attachEvent("onclick",method3);

执行顺序为method3->method2->method1 ======================================================= Mozilla中： addEventListener的使用方式 target.addEventListener(type,listener,useCapture); target： 文档节点、document、window 或 xmlHttPRequest。 type： 字符串，事件名称，不含“on”，比如“click”、“mouSEOver”、“keydown”等。 listener ：实现了 EventListener 接口或者是 javaScript 中的函数。 useCapture ：是否使用捕捉，一般用 false 。例如：document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);IE中： target.attachEvent(type, listener); target： 文档节点、document、window 或 xmlhttpRequest。 type： 字符串，事件名称，含“on”，比如“onclick”、“onmouseover”、“onkeydown”等。 listener ：实现了 EventListener 接口或者是 Javascript 中的函数。 例如：document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});W3C 及 IE 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下: removeEventListener(event,function,capture/bubble); Windows IE的格式如下: detachEvent(event,function); DOM2 的进化:

新的DOM2 用法可以addEventListener()这个函数来观察到:

复制代码 代码如下:

addEventListener(event,function,capture/bubble);

参数event如上表所示, function是要执行的函数, capture与bubble分别是W3C制定得两种时间模式,简单来说capture就是从document的开始读到最后一行, 再执行事件, 而bubble则是先寻找指定的位置再执行事件.capture/bubble的参数是布尔值, True表示用capture, False则是bubble.Windows Internet Explorer也有制定一种EventHandler, 是 attachEvent(), 格式如下:

复制代码 代码如下:

window.attachEvent(”submit”,myFunction());

比较特别的是attachEvent不需要指定capture/bubble的参数, 因为在windows IE环境下都是使用Bubble的模式.如何判断是否支持哪种监听呢？如：

复制代码 代码如下:

if (typeof window.addEventListener != “undefined”) { window.addEventListener(”load”,rollover,false); } else { window.attachEvent(”onload”,rollover) }

上述的 typeof window.addEventListener != “undefined” 程序代码可以判断使用者的浏览器是否支持AddEventListener这个事件模型, 如果不支持就使用attachEvent.W3C 及 IE 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下: W3C格式: removeEventListener(event,function,capture/bubble); Windows IE的格式如下: detachEvent(event,function);