日期:2014-05-16  浏览次数:20447 次

JS的attachEvent和addEventListener

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/

?