Javascript添加事件跨浏览器功能实现:使用attachEvent/addEventListener vs inline events [英] Javascript add events cross-browser function implementation: use attachEvent/addEventListener vs inline events

问题描述

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

In order to add events we could use this simple 1st solution:

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 2nd solution (that adds inline events):

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 在事件处理实现中使用得更多，我想知道:

Since I have the feeling attachEvent/addEventListener are used more around in events handling implementations, I'm wondering:

使用第二种解决方案是否有任何我可能更清楚的缺点/缺点?

我可以看到两个，但我对更多(如果有)感兴趣:

I can see two, but I'm interested in more (if any):

1. 第二个解决方案通过添加内联事件来破坏元素的innerHTML
2. 使用第二个解决方案，我可以轻松删除与特定事件类型相关的所有函数 (html_element['on' + event_name] = null)，但我不能使用 detachEvent/removeEventListener 以完全删除特定功能.

1. the 2nd solution screws up innerHTML of elements by adding events inline
2. Using 2nd solution I can easily remove all functions associated with a certain event type (html_element['on' + event_name] = null), but I can not use detachEvent/removeEventListener to remove exactly a specific function.

诸如使用 jQuery"或任何其他固件之类的任何答案都是毫无意义的！

Any answers like: "use jQuery" or any other FW are pointless!

推荐答案

使用第 2 个解决方案，您必须手动调用之前的函数，因此很难删除特定的侦听器(对我来说，这听起来像而不想清除所有侦听器)，而在第一个解决方案中，您只能同时清除所有侦听器，除非您想模拟第一个功能.

With the 2nd solution, you have to manually call the previous functions, making it hard to remove specific listeners (which, to me, sounds like something you'd rather want than clearing all listeners), while on the first solution, you can only clear them all at the same time, unless you want to emulate the first functionality.

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

Personally, I always use the first solution, because it has the advantage of not having to worry about clearing possible other event listeners.

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

The mozilla wiki also lists the advantages that the first solution works on any DOM element, not just HTML elements, and that it allows finer grained control over the phase when the listener gets activated (capturing vs. bubbling) with the third argument.

这篇关于Javascript添加事件跨浏览器功能实现:使用attachEvent/addEventListener vs inline events的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！