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


Posted in Javascript onMay 21, 2009

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 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下:

W3C格式:

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前面才行)

<html> 
<head> 
</head> 
<body> 
<div id="name1" style="border:1px solid red;padding:10px 10px 10px 10px;" style="border:1px solid red;padding:10px 10px 10px 10px;"> 
<div id="name2" style="border:1px solid green;padding:10px 10px 10px 10px;" style="border:1px solid green;padding:10px 10px 10px 10px;">点击</div> 
</div> 
<div id="info"></div> 
<script type="text/javascript"><!-- 
var name1=document.getElementById('name1'); //要注意 
var name2=document.getElementById('name2'); //要注意 
var info=document.getElementById('info'); 
if(name1.attachEvent){ //对于attachEvent前面的target我们一定要保证不为空 
name1.attachEvent('onclick',function () { info.innerHTML += "红色" + "<br>"; }); 
name2.attachEvent('onclick',function () { info.innerHTML += "绿色" + "<br>"; }); 
}else{ 
name1.addEventListener('click',function () { info.innerHTML += "红色" + "<br>"; },false); 
name2.addEventListener('click',function () { info.innerHTML += "绿色" + "<br>"; },false); 
} 
// --></script> 
</body> 
</html>

从W3C的发展时间轴来看, DOM(Document Object Model)的模型可以分为两种, DOM 0 及 DOM 2. 从数字来看就可以知道DOM 0 当然是比较旧的协议, 我们可以从以下的表格来看:

DOM1 协定:

Event Name Description
onblur() The element has lost focus (that is, it is not selected by the user).
onchange0 The element has either changed (such as by typing into a text field) or the element has lost focus.
onclick0 The mouse has been clicked on an element.
ondblclick() The mouse has been double-clicked on an element.
onfocus() The element has gotten focus.
onkeydown() A keyboard key has been pressed down (as opposed to released) while the element has focus.
onkeypress() A keyboard key has been pressed while the element has focus.
onkeyup() A keyboard key has been released while the element has focus.
onload() The element has loaded (document, frameset, or image).
onmousedown() A mouse button has been pressed.
onmousemove() The mouse has been moved.
onmouseout() The mouse has been moved off of or away from an element.
onmouseover() The mouse has moved over an element.
onmouseup() A mouse button has been released.
onreset() The form element has been reset, such as when a form reset button is pressed.
onresize() The window's size has been changed.
onselect() The text of a form element has been selected.
onsubmit() The form has been submitted.
onunload() The document or frameset has been unloaded.

DOM2 的进化:

DOM 0 Event DOM 2 Event
onblur() blur
onfocus() focus
onchange() change
onmouseover() mouseover
onmouseout() mouseout
onmousemove() mousemove
onmousedown() mousedown
onmouseup() mouseup
onclick() click
ondblclick() dblclick
onkeydown() keydown
onkeyup() keyup
onkeypress() keypress
onsubmit() submit
onload() load
onunload() unload

 新的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的模式.这里用图像的Rollover例子来表现事件的用法:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd“>
<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

Javascript 相关文章推荐
屏蔽F1~F12的快捷键的js函数
May 06 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
Jun 21 Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 Javascript
php的文件上传入门教程(实例讲解)
Apr 10 Javascript
JavaScript基础知识及常用方法总结
Jan 10 Javascript
jQuery 弹出层插件(推荐)
May 24 Javascript
JS在onclientclick里如何控制onclick的执行
May 30 Javascript
深入浅析JavaScript中的RegExp对象
Sep 18 Javascript
vue实现nav导航栏的方法
Dec 13 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
Oct 09 Javascript
小程序实现列表展开收起效果
Jul 29 Javascript
基于vue.js仿淘宝收货地址并设置默认地址的案例分析
Aug 20 Javascript
W3C Group的JavaScript1.8 新特性介绍
May 19 #Javascript
JS backgroundImage控制
May 19 #Javascript
jQuery 源代码显示控件 (Ajax加载方式).
May 18 #Javascript
编写兼容IE和FireFox的脚本
May 18 #Javascript
innerText和innerHTML 一些问题分析
May 18 #Javascript
JS 页面自动加载函数(兼容多浏览器)
May 18 #Javascript
Js 本页面传值实现代码
May 17 #Javascript
You might like
1 Tube Radio
2021/03/02 无线电
PHP错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
php开发过程中关于继承的使用方法分享
2011/06/17 PHP
PHP中return 和 exit 、break和contiue 区别与用法
2012/04/09 PHP
深入理解:单一入口、MVC、ORM、CURD、ActiveRecord概念
2013/06/06 PHP
Laravel 5框架学习之数据库迁移(Migrations)
2015/04/08 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
游戏人文件夹程序 ver 3.0
2006/07/14 Javascript
javascript下判断一个元素是否存在的代码
2010/03/05 Javascript
input 输入框获得/失去焦点时隐藏/显示文字(jquery版)
2013/04/02 Javascript
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
开发中可能会用到的jQuery小技巧
2014/03/07 Javascript
javascript中slice(),splice(),split(),substring(),substr()使用方法
2015/03/13 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
Java设计中的Builder模式的介绍
2018/03/22 Javascript
微信小程序页面间值传递的两种方法
2018/11/26 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
2020/01/14 Javascript
Python基础教程之浅拷贝和深拷贝实例详解
2017/07/15 Python
通过pykafka接收Kafka消息队列的方法
2018/12/27 Python
python应用文件读取与登录注册功能
2019/09/23 Python
Python批量将图片灰度化的实现代码
2020/04/11 Python
Python在字符串中处理html和xml的方法
2020/07/31 Python
Python map及filter函数使用方法解析
2020/08/06 Python
Python爬虫后获取重定向url的两种方法
2021/01/19 Python
Web页面中八种创建多列等高(等高列布局)的实现技术
2012/12/24 HTML / CSS
市场营销专业毕业生自荐信
2013/11/02 职场文书
奠基仪式主持词
2014/03/20 职场文书
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
2015年工商所工作总结
2015/05/21 职场文书
乡镇司法所2015年度工作总结
2015/10/14 职场文书
2016春季运动会前导词
2015/11/25 职场文书
ztree+ajax实现文件树下载功能
2021/05/18 Javascript
python实现会员信息管理系统(List)
2022/03/18 Python