如何检测浏览器是否接受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设置为真值即可。通过以这种方式执行检查，您不依赖于浏览器在幕后使用的原型层次结构。（正如丹达维斯指出的，这可能是一个问题。）

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