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          
} 

或者此第二个解决方案（添加内联事件）：

这两种浏览器都是跨浏览器的，可以这样使用：

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

由于我感觉在事件处理实现中更多地使用了

attachEvent/addEventListener

，我想知道：

使用第二种解决方案有什么缺点/缺点，我最好知道吗？

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

第二种解决方案通过内联添加事件来破坏元素的innerHTML

使用第二种解决方案，我可以轻松删除与特定事件类型相关的所有函数（

html\u元素['on'+event\u name]=null

），但我无法使用

detachEvent/removeEventListener

精确删除特定函数

---

任何像“使用jQuery”或任何其他FW这样的答案都是毫无意义的

对于第二种解决方案，您必须手动调用前面的函数，从而很难删除特定的侦听器（对我来说，这听起来像是您希望清除所有侦听器的事情），而对于第一种解决方案，您只能同时清除所有侦听器，除非您想模拟第一种功能

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

---

还列出了第一个解决方案适用于任何DOM元素（而不仅仅是HTML元素）的优点，并且它允许在侦听器被第三个参数激活时（捕获与冒泡）对阶段进行更细粒度的控制

function addEvent(html_element, event_name, event_function) {
    if (html_element.addEventListener) { // Modern
        html_element.addEventListener(event_name, event_function, false);
    } else if (html_element.attachEvent) { // Internet Explorer
        html_element.attachEvent("on" + event_name, event_function);
    } else { // others
        html_element["on" + event_name] = event_function;
    }
};

---

我认为在你的前两段中，第一件事和第二件事是颠倒的。+1我读了你建议的链接，但Mozilla站点解释的三点并不是那么正确：“1.它允许为一个事件添加多个处理程序”是正确的，但我在回答中编写的两个函数都可以添加多个事件处理程序。“2.当监听器被激活时，它为您提供了更细粒度的阶段控制（捕获与冒泡）”，这是真的，但添加stopEvent函数以防止deafault和停止冒泡很容易，而且attachEvent没有这样的beahvior，因此我们必须创建一个跨浏览器函数。（续）“3.它适用于任何DOM元素，而不仅仅是HTML元素。“，很有趣，但我没有看到一个现实生活中可能需要向dom节点添加事件的示例，因为dom节点不是HTML元素。@Marco Demaio:1。对。但是您的函数是非本地的，任何其他想要注册事件的人都会清除整个onload。2.真的。SVG标记？您忘记了

事件

parameter@Bergi：where，what？在所有这些

event\u函数中调用（…）

表达式。在没有

事件的情况下调用处理程序

！谢谢，但我认为将事件传递给

事件\u函数

不是强制性的。我同意你的观点，如果事件处理程序想要对事件做一些事情，它需要事件参数。你说“它不是强制性的”是什么意思？我以为你想写一个通用的addeventlistener函数。您无法知道处理程序没有使用事件对象。

function addEvent(html_element, event_name, event_function) {
    if (html_element.addEventListener) { // Modern
        html_element.addEventListener(event_name, event_function, false);
    } else if (html_element.attachEvent) { // Internet Explorer
        html_element.attachEvent("on" + event_name, event_function);
    } else { // others
        html_element["on" + event_name] = event_function;
    }
};