Javascript добавить события реализации кросс-браузерной функции: используйте attachEvent / addEventListener против встроенных событий

Question

Чтобы добавить события, мы могли бы использовать это простое 1-е решение :

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          
} 

или это 2-е решение (которое добавляет встроенные события):

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. 2-е решение испортит innerHTML элементов путем добавления встроенных событий
2. Используя 2-е решение, я могу легко удалить все функции, связанные сопределенный тип события (html_element['on' + event_name] = null), но я не могу использовать detachEvent/removeEventListener, чтобы удалить точно определенную функцию.

Любые ответы, такие как: "использовать jQuery" или любой другой FW, бессмысленны!

Answer 1

Со вторым решением вам придется вручную вызывать предыдущие функции, что затрудняет удаление определенных слушателей (что, на мой взгляд, звучит так, как вы бы хотели, а не очищает всех слушателей), в то время как в первом решении,вы можете очистить их все одновременно, если только вы не хотите эмулировать первую функциональность.

Лично я всегда использую первое решение, потому что оно имеет преимущество в том, что не нужно беспокоиться об удалении возможных других событий.listeners.

Вики mozilla также перечисляют преимущества первого решения, которое работает с любым элементом DOM, а не только с элементами HTML, и что оно обеспечивает более точный контроль над фазой, когда слушатель получаетактивирован (захват против пузырьков) с третьим аргументом.

Answer 2

Я бы использовал оба кода, как это

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