Javascript添加事件跨浏览器功能实现：使用attachEvent / addEventListener与内联事件

为了添加事件,我们可以使用这个简单的第一个解决方案：

function AddEvent(html_element,event_name,event_function) 
{       
   if(html_element.attachEvent) //Internet Explorer
      html_element.attachEvent("on" + event_name,function() {event_function.call(html_element);}); 
   else if(html_element.addEventListener) //Firefox & company
      html_element.addEventListener(event_name,event_function,false); //don't need the 'call' trick because in FF everything already works in the right way          
}

或第二个解决方案(增加内联事件)：

function AddEvent(html_element,event_function) 
{       
   var old_event = html_element['on' + event_name];
   if(typeof old_event !== 'function')
      html_element['on' + event_name] = function() { event_function.call(html_element); };
   else
      html_element['on' + event_name] = function() { old_event(); event_function.call(html_element); };
}

这些都是跨浏览器,可以这样使用：

AddEvent(document.getElementById('some_div_id'),'click',function() 
{             
   alert(this.tagName); //shows 'DIV'
});

由于我有感觉attachEvent / addEventListener在更多的事件处理实现中使用,我想知道：

使用第二种解决方案有哪些缺点/缺点,我可能会更好地意识到？

我可以看到两个,但我对更多的兴趣(如果有的话)：

>第二个解决方案通过在线添加事件来拧紧元素的innerHTML
>使用第二个解决方案我可以轻松地删除与某个事件类型相关联的所有功能(html_element [‘on’event_name] = null),但是我不能使用detachEvent / removeEventListener来完全删除一个特定的函数.

任何答案如：“使用jQuery”或任何其他FW是无意义的！

解决方法

使用第二个解决方案,您必须手动调用以前的功能,使得很难删除特定的听众(对我来说,听起来像你想要的东西,而不是清除所有听众),而在第一个解决方案中,您只能同时清除它们,除非您要模拟第一个功能.

就个人而言,我总是使用第一个解决方案,因为它具有不必担心清除可能的其他事件监听器的优点.

mozilla wiki还列出了第一个解决方案适用于任何DOM元素,而不仅仅是HTML元素的优点,并且它允许在侦听器使用第三个参数激活(捕获与冒泡)时对相位进行更精细的粒度控制.