源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

Javascript 的addEventListener()及attachEvent()区别分析

  • 时间:2022-05-17 11:09 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:Javascript 的addEventListener()及attachEvent()区别分析
[b]Mozilla中: [/b]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); [b]IE中: [/b]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 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下: [b]W3C格式: [/b] removeEventListener(event,function,capture/bubble); Windows IE的格式如下: detachEvent(event,function); target.addEventListener(type, listener, useCapture); target 文档节点、document、window 或 XMLHttpRequest。 type 字符串,事件名称,不含“on”,比如“click”、“mouseover”、“keydown”等。 listener 实现了 EventListener 接口或者是 JavaScript 中的函数。 useCapture 是否使用捕捉,看了后面的事件流一节后就明白了,一般用 false 事件触发时,会将一个 Event 对象传递给事件处理程序,比如: document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false); 适应的浏览器版本不同,同时在使用的过程中要注意 attachEvent方法 按钮onclick IE中使用 addEventListener方法 按钮click fox中使用 两者使用的原理:可对执行的优先级不一样,下面实例讲解如下: attachEvent方法,为某一事件附加其它的处理事件。(不支持Mozilla系列) addEventListener方法 用于 Mozilla系列 举例: document.getElementById("btn").onclick = method1; document.getElementById("btn").onclick = method2; document.getElementById("btn").onclick = method3;如果这样写,那么将会只有medhot3被执行 写成这样: 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 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 实例:(要注意的是div必须放到js前面才行)
[url=http://www.w3.org/TR/html4/strict.dtd]http://www.w3.org/TR/html4/strict.dtd[/url]“> <html> <head> <title>Rollover</title> <script type=”text/javascript”>function moveOver(imgObj) {   if (typeof window.addEventListener != “undefined”) {   imgObj.addEventListener(”mouseover”,function(){imgObj.src = imgObj.id + “_over.png”;}, false);   imgObj.addEventListener(”mouseout”, function(){imgObj.src = imgObj.id + “_default.png”;}, false);   } else {   imgObj.attachEvent(”onmouseover”,function(){imgObj.src = imgObj.id + “_over.png”;});   imgObj.attachEvent(”onmouseout”, function(){imgObj.src = imgObj.id + “_default.png”;});   } } function rollover() { var images = document.getElementsByTagName(”img”); var roll = new RegExp (”rollover”); var preload = []; for (var i = 0; i < images.length; i++) {   if (images[i].id.match(roll)) {   preload[i] = new Image();   preload[i].src = images[i].id + “_over.png”;   moveOver(images[i]);   } } } if (typeof window.addEventListener != “undefined”) {   window.addEventListener(”load”,rollover,false); } else {   window.attachEvent(”onload”,rollover) } </script> </head> <body> <p><img id=”rollover_home” name=”img_home” src=”rollover_home_default.png” alt=”Home”></p> <p><img id=”rollover_about” name=”img_about” src=”rollover_about_default.png” alt=”About”></p> <p><img id=”rollover_blog” name=”img_blog” src=”rollover_blog_default.png” alt=”Blog”></p> <p><img id=”logo” name=”img_logo” src=”logo.png” alt=”Braingia Logo”></p> </body> </html> 上述的 typeof window.addEventListener != “undefined” 程序代码可以判断使用者的浏览器是否支持AddEventListener这个事件模型, 如果不支持就使用attachEvent. W3C 及 IE 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下: W3C格式: removeEventListener(event,function,capture/bubble); Windows IE的格式如下: detachEvent(event,function); 数据参考: Chapter 14 - Browsers and JavaScript, JavaScript Step by Step, by Steve Suehring
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部