Wie erkennt man, ob der Browser xmlhttprequest Ereignisse von addEventListener akzeptiert?

Question

Diese Funktion in einem Objekt definiert die Ereignisbehandlung für ein xmlhttprequest-Objekt. Da einige Browser die addEventListener Methode nicht akzeptieren, habe ich einen Test so wenn nicht, definieren sie 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..."); 
    } 
} 

Die "este" ist "das" außerhalb der Funktion (var este = this;)

Der "reqSwitch" zeigt auf die richtige Funktion. Das Problem ist der Test este.Request.hasOwnProperty ("onload") funktioniert nur in Safari. Wie kann ich einen browserübergreifenden Test durchführen, um festzustellen, ob der Browser mit addEventListener funktioniert? https://github.com/jonathantneal/EventListener

Sparen Sie sich die Mühe der Browser-Kompatibilität überprüft und lassen Sie die polyfill damit umgehen

:

Answer 1

Überprüfen Sie, ob das Objekt addEventListener auf einen truthigen Wert gesetzt hat. Wenn Sie die Überprüfung auf diese Weise durchführen, sind Sie nicht von der Prototyphierarchie abhängig, die der Browser im Hintergrund verwendet. (. Wie dandavis pointed out, kann es ein Problem sein)

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..."); 
} 

Wenn Sie Werkzeuge besorgt sind, dass die Dinge Dreck könnte und stellen addEventListener zu flippig Werte, könnten Sie tun:

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

Answer 2

Diese addEventListener polyfill Sie könnten helfen.

Answer 3

TRY IT:

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. 

Answer 4

Versuchen Sie die ältere Möglichkeit, Ereignisse zu registrieren?

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

Auschecken this post, um mehr zu erfahren.