关于addEventListener和attachEvent的初步探讨

关于addEventListener和attachEvent

IE不对应addEventListener，只能使用attachEvent，所以首先需要判断你的浏览器对应的是哪个事件函数

if (window.addEventListener) {//for W3C DOM

window.addEventListener("load",HTMLArea.initOther, false);

} else if (window.attachEvent) {//for IE

window.attachEvent("onload",initOther);

} else {

window.οnlοad= initOther;

}

接下来，让我们回到事件函数上来。

假设你想在窗口被加载的时候执行一个initOther的函数。

通常，我们会这么做

function initOther () {

//do something

}

window.onload =initOther;

但是，如果你的onload事件已经绑定了其他的方法，那么你绑定的那个方法就不会再被执行了。

比如：当你在绑定了initOther()方法之后另外在body上绑定了initMain()方法的话，initMain()方法就不会被执行！

<bodyοnlοad="initMain()">...</body>

我们希望的是这两个函数都被绑定到onload事件上，那么我们应该怎么做呢？

对，就是使用window.addEventListener/window.attachEvent方法

if (window.addEventListener) {//for W3C DOM

window.addEventListener("load",HTMLArea.initOther, false);

} else if (window.attachEvent) {//for IE

window.attachEvent("onload",initOther);

} else {

window.οnlοad= initOther;

}

这里有个重点：

1．当使用window.addEventListener的时候。

可以绑定多个方法，它们是有顺序的。根据你代码中add…的顺序来定。

2．当使用window.attachEvent的时候。

你也可以绑定多个方法，但是IE很调皮，他会随机选定执行顺序。

细心的人会发现window.addEventListener的方法注册变量有3个。

第一个是要注册的事件名

第二个是要绑定的方法

那么第三个是什么呢？

探讨一下

这个参数叫做useCapture ，是一个boolean值，就是true orfalse。如果送出true的话就是浏览器会使用Capture方式，false的话是Bubbling，只有在特定状况下才会有影响，通常建议是false。而会有影响的情形是目标元素(target element)有祖先元素(ancestorelement)，而且也有同样的事件对应函数，

我们来想象一下，架设有一大一小2个箱子，大箱子是红色的，小箱子是蓝色的。小箱子套在大箱子里面。形成父子关系。再假设他们都设定有click事件，一碰就会动。

那么，如果我在蓝色小箱子上click不只会触发蓝色小箱子的click 事件，还会同时触发红色大箱子上的click事件，而useCapture这个参数就是在控制这时候两个click事件的先后顺序。

如果是false，那就会使用bubbling，他是从内而外的流程，所以会先触发蓝色小箱子的click事件再执行红色大箱子的click事件，如果是true，那就是capture，和bubbling相反是由外而内，会先执行红色大箱子的click事件才执行蓝色小箱子的click事件。

那如果不同层的元素使用的useCapture不同呢？

就是会先从最外层元素往目标元素寻找设定为capture的事件，到达目标元素执行目标元素的事件后，再寻原路往外寻找设定为bubbling的事件。

(转自：冷月听雨声 )

关于addEventListener和attachEvent的初步探讨相关推荐

addEventListener和attachEvent二者绑定的执行函数中的this不相同【转载】
yuanwen http://www.jb51.net/article/32511.htm 写 addEventListener 和 attachEvent 区别的博文不少,不过大部分都把重点放置于前 ...
在英语课堂中培养学生音素觉知的初步探讨(Phonemic Awareness)
From: http://blog.sina.com.cn/s/blog_4e8bd3550100c3kk.html Phonemic Awareness (2008-11-14 20:17:04)转 ...
字符集问题的初步探讨
字符集问题的初步探讨 Oracle全球支持(即Globalization Support)允许我们使用本地语言和格式来存储和检索数据.通过全球支持,Oracle可以支持多种语言及字符集,得以展示数据库 ...
addEventListener和attachEvent的区别
转 addEventListener和attachEvent的区别区别如下 addEventListener共有3个参数,如下所示: element.addEventListener(type,li ...
SN-TOP架构的初步探讨——谈淘宝TOP平台的升级
SN-TOP架构的初步探讨 --谈淘宝TOP平台的升级文章全文将于12月10日发布,敬请关注!
初步探讨BitTorrent文件的结构
初步探讨BitTorrent文件的结构百度百科介绍: torrent文件本质上是文本文件,包含Tracker信息和文件信息两部分.Tracker信息主要是BT下载中需要用到的Tracker服务器的地 ...
Javascript 的addEventListener()及attachEvent()区别分析
Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点.d ...
事件绑定-addEventListener()和attachEvent()的区别及用法
JavaScript-DOM-事件绑定当我们为元素绑定一个单击事件时,通常会想到element.οnclick=function(){},但是要绑定多个单击函数时却会失效,并且会被最新的响应函数 ...
初步探讨WPF的ListView控件(涉及模板、查找子控件)
本文结合模板的应用初步介绍ListView的应用一.Xaml中如何建立数据资源大部分数据都会来自于后台代码,如何Xaml同样的建立数据源呢?比如建立一个学生List: 首先引入命名空间: xmln ...

关于addEventListener和attachEvent的初步探讨

关于addEventListener和attachEvent的初步探讨相关推荐

最新文章

热门文章