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 相关文章推荐
javascript不同页面传值的改进版
Sep 30 Javascript
扩展jQuery 键盘事件的几个基本方法
Oct 30 Javascript
基于jquery的一行代码轻松实现拖动效果
Dec 28 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
Aug 26 Javascript
javascript中基本类型和引用类型的区别分析
May 12 Javascript
jquery常用函数与方法汇总
Sep 01 Javascript
jQuery之动画效果大全
Nov 09 Javascript
详解AngularJS验证、过滤器、指令
Jan 04 Javascript
jQuery动画_动力节点节点Java学院整理
Jul 04 jQuery
Vue.js 中取得后台原生HTML字符串 原样显示问题的解决方法
Jun 10 Javascript
JavaScript Canvas实现验证码
Aug 02 Javascript
JavaScript中时间格式化新思路toLocaleString()
Nov 07 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
PHP读取PDF内容配合Xpdf的使用
2012/11/24 PHP
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
理解Javascript_03_javascript全局观
2010/10/11 Javascript
javascript动态加载实现方法一
2012/08/22 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
2014/01/13 Javascript
jQuery判断数组是否包含了指定的元素
2015/03/10 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
2015/04/07 Javascript
JS+CSS实现鼠标滑过时动态翻滚的导航条效果
2015/09/24 Javascript
js+css简单实现网页换肤效果
2015/12/29 Javascript
confirm确认对话框的实现方法总结
2016/06/17 Javascript
Wireshark基本介绍和学习TCP三次握手
2016/08/15 Javascript
JS实现针对给定时间的倒计时功能示例
2017/04/11 Javascript
JavaScript模块化之使用requireJS按需加载
2017/04/12 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
mvc框架打造笔记之wsgi协议的优缺点以及接口实现
2018/08/01 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
Html5游戏开发之乒乓Ping Pong游戏示例(三)
2013/01/21 HTML / CSS
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
Smilodox官方运动服装店:从运动服到健身配件
2020/08/27 全球购物
护理专业应届毕业生推荐信
2013/11/15 职场文书
三查三看党性分析材料
2014/02/18 职场文书
生日主持词
2014/03/20 职场文书
诉前财产保全担保书
2014/05/20 职场文书
要账委托书范本
2014/09/15 职场文书
公司股份转让协议书范本
2015/01/28 职场文书
会计主管岗位职责
2015/04/02 职场文书
北京青年观后感
2015/06/15 职场文书
政审证明范文
2015/06/19 职场文书
SQL Server中交叉联接的用法详解
2021/04/22 SQL Server
安装pytorch时报sslerror错误的解决方案
2021/05/17 Python