1.attachEvent和addEventListener
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
使用实例:
(1)var el = EDITFORM_DOCUMENT.body;
//先取得对象,EDITFORM_DOCUMENT实为一个iframe
if (el.addEventListener)...{
el.addEventListener('click', KindDisableMenu, false);
} else if (el.attachEvent)...{
el.attachEvent('onclick', KindDisableMenu);
}
(2)
if (window.addEventListener) ...{
window.addEventListener('load', _uCO, false);
} else if (window.attachEvent) ...{
window.attachEvent('onload', _uCO);
}
2 addEventListener的第三个参数
W3C DOM裡用来新增触发事件的函数叫AddEventListener,不过我一直不知道这个函数的第三个参数是要做什麼用的,总是随便设,也没发现差异再哪,前两天看ppk on javascript终於看到说明了,至於很久以前就有的DOM的标準文件,我其实根本没去找过这个参数的资讯。
这个参数叫做useCapture,是一个boolean值,就是true or false,如果送出true的话就是瀏览器会使用Capture方式,false的话是Bubbling,只有在特定状况下才会有影响,通常建议是false,而会有影响的情形是目标元素(target element)有祖先元素(ancestor element),而且也有同样的事件对应函数,我想,看图会比较清楚。
像这张图所显示的,我的范例有两层div元素,而且都设定有click事件,一般来说,如果我在内层蓝色的元素上click不只会触发蓝色元素的click事件,还会同时触发红色元素的click事件,而useCapture这个参数就是在控制这时候两个click事件的先后顺序。如果是false,那就会使用bubbling,他是从内而外的流程,所以会先执行蓝色元素的click事件再执行红色元素的click事件,如果是true,那就是capture,和bubbling相反是由外而内,会先执行红色元素的click事件才执行蓝色元素的click事件。附上两个范例,capture和bubbling,两个档案只有差在此一参数不同,可以发现事件的发生顺序不一样了。
那如果不同层的元素使用的useCapture不同呢?就是会先从最外层元素往目标元素寻找设定为capture的事件,到达目标元素执行目标元素的事件后,再寻原路往外寻找设定为bubbling的事件。
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/fisher_jiang/archive/2008/03/02/2139089.aspx
http://blog.othree.net/log/2007/02/06/third-argument-of-addeventlistener/
分享到:
相关推荐
attachEvent与addEventListener区别适应的浏览器版本不同,同时在使用的过程中要注意
(FF下) 对象名.attachEvent(“事件名”,函数名);(IE下) 说明: 事件名称,要注意的是”onclick”要改为”click”,”onblur”要改为”blur”,也就是说事件名不要带”on”。 函数名,记住不要跟括号最后一个参数是个...
在js中绑定多个事件用到的是两个方法:attachEvent和addEventListener,但是这两个方法又存在差异性 attachEvent方法 只支持IE678,不兼容其他浏览器 addEventListener方法 兼容火狐谷歌,不兼容IE8及以下 ...
Mozilla中: addEventListener的使用方式: target.addEventListener(type, listener, useCapture); target: 文档节点、document、window 或 XMLHttpRequest。 type: 字符串,事件名称,不含“on”,比如“click”...
这时就要用window.attachEvent和window.addEventListener来解决一下。 下面是一个解决方法。至于attachEvent和addEventListener的用法,可以自己Google或百度一下。 代码如下: if (document.all){ window....
写 addEventListener 和 attachEvent 区别的博文不少,不过大部分都把重点放置于前者是Firefox chrome,后者只是存在于IE系列中。 最近在写一个事件代理的时候,遇到一个BUG,发现除此外,二者绑定的执行函数中的 ...
JS动态添加事件的方法有很多,我们可以使用setAttribute、attachEvent 和 addEventListener等等,感兴趣的朋友可以参考下
自己常用的js库和写的一个交互型可编辑表格: BaseJs库的一点源码: /** * 自定义javascript常用基础库 author zhang_jhai 创建时间 2010/04/10 最后修改时间 2010/05/03 * version 2.0 */ // Base库基础类 BaseJs ...
this 指钟是JavaScript语言中的一个特殊指钟,他在代码运行时,指向调用this语句的当前对象. 如果是事件绑定函数,则指向被绑定的元素本身. [removed] //by Go_Rush(阿舜) from ...
<script type="text/javascript"> //调用微信JS api 支付 function jsApiCall() { WeixinJSBridge.invoke( "getBrandWCPayRequest", '.$jsApiParameters.', function(res){ //alert(res.err_msg); //...
window 的 onload、onresize、onscroll 事件,跟其他的事件不一样,它不能用 attachEvent 或 addEventListener 来添加。也就是说,它只能这样来(以 onload 为例,下同): 代码如下: [removed] = function() { // ...
javascript中使用addEventListener()或attachEvent()绑定事件时会有几个小问题: 一、使用addEventListener()或attachEvent()添加的匿名函数无法移除。 代码如下:var oBtn = document.getElementById(‘btn’);oBtn...
代码如下: function addEventSimple(obj,evt,fn) { if (obj.addEventListener) obj.addEventListener(evt,fn,false); else if (obj.attachEvent) obj.attachEvent(‘on’+evt,fn); } function removeEventSimple(obj...
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]综合上节attachEvent与addEventListener。 点击 添加事件点击 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]下面是关于ie与firefox event的详细区别window....
更多的文章可以参考 //... [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 查看运行结果 综合上节attachEvent与addEventListener。 代码如下:[removed] <!– function Click(event){ event = event? event
22、比较 attachEvent 和 addEventListener?(必会) 115 23、document.write 和 innerHTML 的区别?(必会) 115 24、 什么是 window 对象?什么是 document 对象?(必会) 116 25、Js 拖动的原理?(必会) ...