javascript - 如何检测浏览器是否会通过 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？

Answer 1

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

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") {