如何检测浏览器是否支持addEventListener接收XMLHttpRequest事件？

Question

这个函数位于对象内部，用于定义 xmlhttprequest 对象的事件处理。由于某些浏览器不支持 addEventListener 方法，因此我进行了测试，如果不支持，则会定义 onstatechange：

var reqEngatilhar = function(){
    este.concluido = false;
    timeoutId = setTimeout(reqTimeout, este.timeout);
    if(este.Request.hasOwnProperty("onload")){
        este.Request.addEventListener("error", reqErro, true);
        este.Request.addEventListener("progress", reqMon, false);
        este.Request.addEventListener("abort", reqAbort, false);
        este.Request.addEventListener("load", reqFim, false);
        console.log("$Http reqEngatilhar usando eventos...");
    } else {
        este.Request.onreadystatechange = function (e) { reqSwitch(e); };
        console.log("$Http reqEngatilhar usando onreadystatechange...");
    }
}

“este”在函数外部是“this”的意思（var este = this;）

“reqSwitch”将指向正确的函数。问题是测试 este.Request.hasOwnProperty("onload") 仅适用于 Safari。如何进行跨浏览器测试以检测浏览器是否支持 addEventListener?

- Gustavo

---

删掉 hasOwnProperty 部分，这些方法是继承来的：if(este.Request.onload!==undefined)。 - dandavis

Answer 1

只需检查对象是否将addEventListener设置为真值。通过以这种方式执行检查，您不会依赖浏览器在幕后使用的原型层次结构。(正如dandavis指出的那样，这可能是一个问题。)

if (este.Request.addEventListener) {
    este.Request.addEventListener("error", reqErro, true);
    // etc...
} else {
    este.Request.onreadystatechange = function (e) { reqSwitch(e); };
    console.log("$Http reqEngatilhar usando onreadystatechange...");
}

如果你担心工具可能会搞砸事情并将addEventListener设置为奇怪的值，可以使用以下方法：

if (typeof este.Request.addEventListener === "function") {

- Louis

Answer 2

尝试一下：

var util = {
    getAttribute: function (dom, attr) {
        if (dom.getAttribute !== undefined) {
            return dom.getAttribute(attr);
        } else if (dom[attr] !== undefined) {
            return dom[attr];
        } else {
            return null;
        }
    },
    addEvent: function (obj, evtName, func) {
        //Primero revisar attributos si existe o no.
        if (obj.addEventListener) {
            obj.addEventListener(evtName, func, false);

        } else if (obj.attachEvent) {
            obj.attachEvent(evtName, func);
        } else {
            if (this.getAttribute("on" + evtName) !== undefined) {
                obj["on" + evtName] = func;
            } else {
                obj[evtName] = func;
            }

        }

    },
    removeEvent: function (obj, evtName, func) {
        if (obj.removeEventListener) {
            obj.removeEventListener(evtName, func, false);
        } else if (obj.detachEvent) {
            obj.detachEvent(evtName, func);
        } else {
            if (this.getAttribute("on" + evtName) !== undefined) {
                obj["on" + evtName] = null;
            } else {
                obj[evtName] = null;
            }
        }

    },
    getAjaxObject: function () {
        var xhttp = null;
        //XDomainRequest
        if ("XMLHttpRequest" in window) {
            xhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        return xhttp;
    }

};

//START CODE HERE.

var xhr = util.getAjaxObject();

var isUpload = (xhr && ('upload' in xhr) && ('onprogress' in xhr.upload));

if (isUpload) {
    util.addEvent(xhr, "progress", xhrEvt.onProgress());
    util.addEvent(xhr, "loadstart", xhrEvt.onLoadStart);
    util.addEvent(xhr, "abort", xhrEvt.onAbort);
}

util.addEvent(xhr, "readystatechange", xhrEvt.ajaxOnReadyState);

var xhrEvt = {
    onProgress: function (e) {
        if (e.lengthComputable) {
            //Loaded bytes.
            var cLoaded = e.loaded;
        }
    },
    onLoadStart: function () {
    },
    onAbort: function () {
    },
    onReadyState: function () {
        var state = xhr.readyState;
        var httpStatus = xhr.status;

        if (state === 4 && httpStatus === 200) {
            //Completed success.
        }

    }
};

//CONTINUE YOUR CODE HERE.

- toto

Answer 3

这个 addEventListener polyfill 可能会对你有所帮助：

https://github.com/jonathantneal/EventListener

让 polyfill 处理浏览器兼容性问题，省去自己检查的麻烦。

- Lesley

---

你能准确指出在 polyfill 中 addEventListener 方法是如何添加到 XMLHttpRequest 对象中的吗？我找了很久，但似乎这个 polyfill 只适用于 DOM 树中的对象。 - Louis

Answer 4

也许可以尝试使用旧的事件注册方式？

    // Pass a function reference — do not add '()' after it, which would call the function!
el.onclick = modifyText;

// Using a function expression
element.onclick = function() {
  // ... function logic ...
};

查看此文章以了解更多信息。

- Technologeek