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

问题描述

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

  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&公司
 html_element.addEventListener（event_name，event_function，false）; //不需要打电话的伎俩，因为在一切都已经以正确的方式工作
} 
  

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

  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）; //显示'DIV'
}）; 
  

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

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

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

1. 第二个解决方案通过添加事件内联


2. 使用第二个解决方案来解决内容元素的内在问题我可以轻松地删除与某个事件类型相关联的所有功能（ html_element ['on'+ event_name] = null ），但是我不能使用 detachEvent / removeEventListener 来完全删除一个特定的函数

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

解决方案

使用第二个解决方案，您必须手动调用以前的功能，使其难以删除specif ic听众（对我来说，听起来像你想要的东西，而不是清除所有听众），而在第一个解决方案中，您只能同时清除所有内容，除非您想要模拟第一个功能。 p>

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

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

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); };
}

These are both cross-browsers and can be used in this way:

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

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

Are there any disadvantages/drawbacks against using the 2nd solution that I might better be aware of?

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

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.

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

解决方案

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.

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与内联事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！