ブラウザがxmlhttprequestイベントをaddEventListenerで受け入れるかどうかを検出するにはどうすればいいですか？

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

「エステ」で「この」機能外（VARのエステ=この;）

"reqSwitch"は右の機能を指します。問題はテストですeste.Request.hasOwnProperty（ "onload"）はSafariでのみ動作します。ブラウザがaddEventListenerで動作するかどうかを検出するためにクロスブラウザテストを行うにはどうすればよいですか？

Answer 1

オブジェクトの真偽値をaddEventListenerに設定しているかどうかを確認してください。このようにチェックを行うことで、ブラウザがシーンの背後で使用するプロトタイプ階層に依存することはありません。 （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") { 

Answer 2

このaddEventListenerポリフィルはあなたを助けるかもしれない：

https://github.com/jonathantneal/EventListener

は自分でブラウザの互換性を確認する手間を保存し、ポリフィルはそれを処理させます。

Answer 3

は、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

イベントを登録する古い方法をお試しください。

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

詳しくはthis postをご覧ください。