[No00006A]Js的addEventListener()及attachEvent()区别分析【js中的事件监听】
1.添加时间监听：
Chrom中：
addEventListener的使用方式：
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);
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);});
两者使用的原理：可对执行的优先级不一样，下面实例讲解如下：
a.attachEvent方法，为某一事件附加其它的处理事件。（不支持Chrome系列）
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
b.addEventListener方法 用于 Chrome系列
如果是Chrome系列，并不支持该方法，需要用到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
所以要兼容Chrome和IE，要写if判断，举例：(要注意的是div必须放到js前面才行，文件编码为utf-8）
<html>
<head>
<meta charset="utf-8">
</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>
那为什么会有含"on"和不含"on"的问题？
答案要从W3C的发展时间轴来看, DOM(Document Object Model)的模型可以分为两种, DOM 0 及 DOM 2. 从数字来看就可以知道DOM 0 当然是比较旧的协议, 我们直接来看DOM2 :
|
DOM 0&DOM1 协定 Event(Event Name) |
DOM 2 Event |
Description |
|
onblur() |
blur |
The element has lost focus (that is, it is not selected by the user). |
|
onchange() |
change |
The element has either changed (such as by typing into a text field) or the element has lost focus. |
|
onclick() |
click |
The mouse has been clicked on an element. |
|
ondblclick() |
dblclick |
The mouse has been double-clicked on an element. |
|
onfocus() |
focus |
The element has gotten focus. |
|
onkeydown() |
keydown |
A keyboard key has been pressed down (as opposed to released) while the element has focus. |
|
onkeypress() |
keypress |
A keyboard key has been pressed while the element has focus. |
|
onkeyup() |
keyup |
A keyboard key has been released while the element has focus. |
|
onload() |
load |
The element has loaded (document, frameset, or image). |
|
onmousedown() |
mousedown |
A mouse button has been pressed. |
|
onmousemove() |
mousemove |
The mouse has been moved. |
|
onmouseout() |
mouseout |
The mouse has been moved off of or away from an element. |
|
onmouseover() |
mouseover |
The mouse has moved over an element. |
|
onmouseup() |
mouseup |
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() |
submit |
The form has been submitted. |
|
onunload() |
unload |
The document or frameset has been unloaded. |
addEventListener()这个函数只支持新的DOM2 ：addEventListener(event,function,capture/bubble);
参数event如上表（DOM 2 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的模式.这里用个例子来表现事件的用法:
<!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>
ps：你需要图片素材下载：[No00006A]图片素材.7z
上述的 typeof window.addEventListener != "undefined" 程序代码可以判断使用者的浏览器是否支持AddEventListener这个事件模型, 如果不支持就使用attachEvent.
2.移除事件监听：
W3C 及 IE 同时支持移除指定的事件, 用途是移除设定的事件, 格式分别如下:
W3C格式:
removeEventListener(event,function,capture/bubble);
Windows IE的格式如下:
detachEvent(event,function);
[No00006A]Js的addEventListener()及attachEvent()区别分析【js中的事件监听】的更多相关文章
- addEventListener()及attachEvent()区别分析
Javascript 的addEventListener()及attachEvent()区别分析 Mozilla中: addEventListener的使用方式: target.addEventLis ...
- JS常用方法（获取Class、获取元素样式、事件监听、cookie、ajax等）
var Util = {}; Util.byClass = function (oClass) {//全局获取 var tags = document.all ? document.all : doc ...
- Javascript添加事件的addEventListener()及attachEvent()区别分析，事件委托
Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.d ...
- Javascript 的addEventListener()及attachEvent()区别分析
大家都知道事件的用法就是当某个事件(状况)被触发了之后就会去执行某个Function, 尤其是Javascript, 在当红AJAX的催化下, 了解Javascript的Event用法更加重要, 在这 ...
- ie和火狐事件addEventListener()及attachEvent()区别分析
Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.d ...
- js基础——事件绑定（事件监听）
JavaScript事件一共有三种监听方法分别如下: 1.事件监听一夹杂在html标签内 <div id="box" onClick="alert('HELLO W ...
- Ext JS 5的声明式事件监听
在前文<在Ext JS 5使用ViewControllers>中,简单的介绍了Ext JS 5的一项重要改进——声明式事件监听.在本文,将深度探讨如何使用声明式事件监听啦简化应用程序的视图 ...
- SpringBoot事件监听机制源码分析(上) SpringBoot源码(九)
SpringBoot中文注释项目Github地址: https://github.com/yuanmabiji/spring-boot-2.1.0.RELEASE 本篇接 SpringApplicat ...
- springBoot高级:自动配置分析,事件监听,启动流程分析,监控,部署
知识点梳理 课堂讲义 02-SpringBoot自动配置-@Conditional使用 Condition是Spring4.0后引入的条件化配置接口,通过实现Condition接口可以完成有条件的加载 ...
随机推荐
- SpringMVC中servletFileUpload.parseRequest(request)解析为空获取不到数据问题
原因分析 首先我们来看下Spring mvc 中文件上传的配置 <bean id="multipartResolver" class="org.springfram ...
- Javascript中addEventListener和attachEvent的区别
在利用javascript为DOM Element添加事件处理程序时,如果要想下兼容IE6,7时,就不得不考虑addEventListener与attachEvent的异同. 1.首先说下addEve ...
- 怎么才能算大项目（Application），大的衡量？
最近在思考一个问题,就是怎么才算一个大型项目,大的衡量有哪些东西?为什么要搞清这个问题呢,是因为在实际的开发过程中,如果知道这是个多大的项目,那就有各种相应的解决方案(我们称之为套路的东西)就可以使用 ...
- Sanboxie 5.14安装图解
Sanboxie, 即沙盘,引用官方解释:电脑就像一张纸,程序的运行与改动,就像将字写在纸上.而Sandboxie就相当于在纸上放了块玻璃,程序的运行与改动就像写在了那块玻璃上,除去玻璃,纸上还是一点 ...
- 修改ArcSDE的最大连接数
我们大体都知道ArcSDE的连接数有 48 的限制,很多人也知道这个参数可以修改,并且每种操作系统能支持的最大连接数是不同的. 如果应用报错:超出系统最大连接数该如何处理? 两种解决办法: 第一,首先 ...
- 用UILocalNotification实现一个闹钟（Swift）
之前项目需求要实现一个闹钟,github上找了半天发现都是很旧的代码了,所以就准备自己写一个,刚好最近在学习Swift,就用Swift写了一个demo放在这里:https://github.com/P ...
- 基本动画CABasicAnimation - 完成之后闪回初始状态
基本动画CABasicAnimation 结束之后,默认闪回初始状态,那怎么解决呢? position需要设备两个属性: // MARK: - 结束后不要闪回去 anim.removedOnCompl ...
- iOS、Xcode监测键盘的显示和隐藏变化，并获得键盘高度，改变tableView的frame和偏移
<pre name="code" class="objc"><pre name="code" class="ob ...
- iOS Swift-注释与分号
iOS Swift-注释与分号 注释 注释是每门语言都存在的一种解释方式,Swift的注释与C语言的注释非常相似,单行注释采用//. //这是一个注释 在Swift中也可以使用多行注释,起始标记使用( ...
- zDiaLog弹出层
zDiaLog弹出层 立即下载 插件描述:zDiaLog弹出层 弹出框: 代替window.open.window.alert.window.confirm:提供良好的用户体验: 水晶质感,设计细腻 ...