Cách phát hiện xem trình duyệt có chấp nhận các sự kiện xmlhttprequest bởi addEventListener không?

Question

Hàm này bên trong một đối tượng xác định sự kiện xử lý đối tượng xmlhttprequest. Như một số trình duyệt không chấp nhận phương pháp addEventListener, tôi đã làm một thử nghiệm vì vậy nếu không, nó sẽ xác định 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..."); 
    } 
} 

Các "este" là "này" ngoài chức năng (var este = này;)

"reqSwitch" sẽ trỏ đến funcion phải. Vấn đề là thử nghiệm este.Request.hasOwnProperty ("onload") chỉ hoạt động trong Safari. Làm cách nào để tôi có thể thực hiện kiểm tra trình duyệt chéo để phát hiện xem trình duyệt có hoạt động với addEventListener không?

Answer 1

Chỉ cần kiểm tra xem đối tượng có addEventListener được đặt thành giá trị trung thực hay không. Bằng cách thực hiện kiểm tra theo cách này, bạn không phụ thuộc vào hệ thống phân cấp nguyên mẫu mà trình duyệt sử dụng đằng sau hậu trường. (. Như dandavis pointed out, nó có thể là một vấn đề)

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

Nếu bạn lo lắng về công cụ có thể muck vật và thiết addEventListener đến giá trị sôi nổi, bạn có thể làm:

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

Answer 2

addEventListener polyfill Điều này có thể giúp bạn:

https://github.com/jonathantneal/EventListener

Lưu cho mình những rắc rối của việc kiểm tra khả năng tương thích trình duyệt và để cho các polyfill xử lý đó.

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

Hãy thử cách đăng ký sự kiện cũ hơn?

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

Khám phá this post để biết thêm.