как работает этот код при добавлении события в элемент DOM?

Question

Я смущен кодом в блоке if (obj.attachEvent) {...}. Я нашел этот пример, глядя на эту страницу: http://codebits.glennjones.net/cheatsheet/javascript.htm#events

В любом случае, кто-нибудь может объяснить, что делает код? Я предполагаю, что obj является элементом DOM, type является типом события (например, click или hover), а fn является функцией обратного вызова.

function addEvent(obj, type, fn) {
    if (obj) {
        if (obj.attachEvent) {
            obj['e' + type + fn] = fn;
            obj[type + fn] = function () { obj['e' + type + fn](window.event); };
            obj.attachEvent('on' + type, obj[type + fn]);
        } else {
            obj.addEventListener(type, fn, false);
        }
    }
};

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

function attachEvent(element, type, fn) {
    if (element.addEventListener) {
        element.addEventListener(type, fn, false);
    } else if (element.attachEvent) {
        element.attachEvent('on' + type, fn);
    }
};

Answer 1

Комментарий в коде ниже:

if (obj.attachEvent) {  //if the browser supports the attachEvent method
    obj['e' + type + fn] = fn; //store the handler
    obj[type + fn] = function () { obj['e' + type + fn](window.event); }; //create the callback that invokes the handler stored above
    obj.attachEvent('on' + type, obj[type + fn]); //Attach an event handler to the on<event>, such as onclick
} else {
    obj.addEventListener(type, fn, false); //otherwise, default to browsers supporting addEventListener
}

Answer 2

Как вы знаете, attachEvent - это функция в Проводнике, и я не уверен, что будет означать this при вызове функции, если мы добавим прослушиватель, подобный этому. Необходимо проверить это.

`element.attachEvent('on' + type, fn);`

Но этот код

 obj['e' + type + fn] = fn;  // adds listener as a function of the object obj
 obj[type + fn] = function () { obj['e' + type + fn](window.event); };  // creates a proxy function which invokes the listener.
 obj.attachEvent('on' + type, obj[type + fn]);  // adds proxy function as listener

добавляет одну функцию к объекту и вызывает исходную функцию слушателя из этой функции. Это гарантирует, что внутри оригинальной функции слушателя this будет ссылаться на объект, для которого слушатель был добавлен. Я думаю, что это на самом деле для старых версий проводника.