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

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

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          
} 

or this 第二种解决方案（添加内联事件）：

function AddEvent(html_element, event_name, 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在事件处理实现中更多地使用，我想知道：

使用第二种解决方案是否有任何我可能最好意识到的缺点/缺点？

我可以看到两个，但我对更多（如果有的话）感兴趣：

1. 第二种解决方案通过添加内联事件来搞乱元素的innerHTML
2. 使用第二种解决方案，我可以轻松删除与特定事件类型相关的所有功能（html_element['on' + event_name] = null），但我不能使用detachEvent/removeEventListener精确删除特定功能。

任何诸如“使用 jQuery”或任何其他框架之类的答案都是毫无意义的！

使用第二个解决方案，您必须手动调用以前的函数，这使得删除特定的侦听器变得困难（对我来说，这听起来像是您宁愿而不是清除所有侦听器），而在第一个解决方案中，您只能同时清除它们，除非您想模拟第一个功能。

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

The 莫斯拉维基 https://developer.mozilla.org/en/DOM/element.addEventListener还列出了第一个解决方案的优点，即第一个解决方案适用于任何 DOM 元素，而不仅仅是 HTML 元素，并且它允许在使用第三个参数激活侦听器（捕获与冒泡）时对阶段进行更细粒度的控制。