如何檢測瀏覽器是否接受addEventListener的xmlhttprequest事件？

對象內部的這個函數定義了xmlhttprequest對象的事件處理。由於一些瀏覽器沒有接受addEventListener方法，我做了測試，以便如果沒有，它將定義onstatechange：如何檢測瀏覽器是否接受addEventListener的xmlhttprequest事件？

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？

來源

2016-06-20 Gustavo

殺死hasOWnProperty部分，那些方法被繼承：'if（este.Request.onload！== undefined）' – dandavis

只要檢查對象是否有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") {

來源

2016-06-30 17:56:52 Louis

-1

這addEventListener填充工具可以幫助你：

https://github.com/jonathantneal/EventListener

保存自己檢查瀏覽器的兼容性的麻煩，讓填充工具搞定。

來源

2016-06-28 18:01:02 Lesley

你可以指出[在polyfill中]的確切位置（https://github.com/jonathantneal/EventListener /blob/master/EventListener.js）方法'addEventListener'被添加到'XMLHttpRequest'對象？我看了看，看起來這個polyfill只適用於屬於DOM樹的對象。 – Louis

試試：

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.

來源

2016-07-02 00:50:11 toto

-1

嘗試舊的方式註冊事件也許？

// 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。

來源

2016-07-05 11:22:10 Technologeek

如何檢測瀏覽器是否接受addEventListener的xmlhttprequest事件？

回答

相關問題