attachEvent和addEventListener 使用方法再谈

最近要用到给元素添加事件，于是就找了attachEvent和addEventListener 的使用方法，从中学习了很多，但仍是还有问题，不过最终也都找到了解决办法，现在详细记录如下：

 

1、基本的使用方法就直接转载别人的了，如下：

 

attachEvent方法，为某一事件附加其它的处理事件。（不支持Mozilla系列）

attachEvent(eventType,listenerMethod); 

addEventListener方法 用于 Mozilla系列

addEventListener(eventType,listenerMethod,useCapture); 

举例:

document.getElementById("btn").onclick = method1;document.getElementById("btn").onclick = method2;document.getElementById("btn").onclick = method3; 

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);

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);

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); } function KindDisableMenu() { alert("Clicked!"); }

 

2。

var el = EDITFORM_DOCUMENT.body; //先取得对象，EDITFORM_DOCUMENT实为一个iframeif (el.addEventListener)...{ el.addEventListener('click', KindDisableMenu, false);} else if (el.attachEvent)...{ el.attachEvent('onclick', KindDisableMenu);}

if (window.addEventListener){window.addEventListener('load', _uCO, false);}else if (window.attachEvent){window.attachEvent('onload', _uCO);}function _uCO(){alert("Loaded!");} 

基本使用就是这样。

attachEvent(eventType,listenerMethod); 

addEventListener(eventType,listenerMethod,useCapture); 

再回头看看上面的例子，发现其中的listenerMethod函数都是没有参数的，如果需要带入参数要怎么办呢？你也许会想，那我就加个参数就行了，如下

function DrawSpotArea(spot){// 创建一个热区对象var spotArea = document.createElement('area');spotArea.title = spot.Title;// 为热区添加点击click事件if (spotArea.attachEvent)// IE{spotArea.attachEvent("onclick", spotAreaClicked(spot));}else if (spotArea.addEventListener)// FF{spotArea.addEventListener("click", spotAreaClicked(spot), false);}}function spotAreaClicked(spot){alert(spot.Title);}

但是实际运行时却是报错，显然此方法行不通。既然使用带参数的外置函数不行，那我可以直接在写成内置函数，就可以直接引用spot.Title内容，但是为了保持程序兼容IE和FF，不得不将同样的方法再多拷贝一份，很不爽吧！

不断努力之下，找到了大概两种方法，可以实现上述功能，还是直接看代码吧

方法一：

function DrawSpotArea(spot){// 创建一个热区对象var spotArea = document.createElement('area');spotArea.title = spot.Title;// 为热区添加点击click事件if (spotArea.attachEvent)// IE{spotArea.attachEvent("onclick", registClick(spot));}else if (spotArea.addEventListener)// FF{spotArea.addEventListener("click", registClick(spot), false);}}// 注册点击的函数var registClick = function(spot){return function(){spotAreaClicked(spot);// 返回处理点击的函数}}// 处理点击的函数function spotAreaClicked(spot){alert(spot.Title);}

方法二：

function DrawSpotArea(spot){// 创建一个热区对象var spotArea = document.createElement('area');spotArea.title = spot.Title;addEvent(spotArea, 'click', function() { spotAreaClicked(spot); });}// 处理点击的函数function spotAreaClicked(spot){alert(spot.Title);}// 添加事件function addEvent(node, event_type, listener_method){if (node.addEventListener){ // W3C增加事件侦听方法 (浏览器能力检测).node.addEventListener(event_type, listener_method, false);// 参数false,以冒泡方式,截获事件流.于ie保持一致.return true;}else if (node.attachEvent){ // IE 增加事件侦听方法 这里通过中间的匿名函数解决this 引用的问题...node['temp' + event_type + listener_method] = listener_method;node[event_type + listener_method] = function(){node['temp' + event_type + listener_method](window.event);}node.attachEvent('on' + event_type, node[event_type + listener_method])return true;}return false;}

具体的我也不解释了，类似的看代码就行了

最后补充一点addEventListener的第三個參數useCapture的意义

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事件。