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实为一个iframe
if (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 事件。