window.onerror 和window.addEventListener('error')的區別

全局處理js運行時未處理異常的時候，經常使用到window.onerror，有時候會用到window.addEventListener('error',function(event){}),這兩者到底有什麼區別呢？

window.onerror

window.onerror是一個全局變量，默認值爲null。當有js運行時錯誤觸發時，window會觸發error事件，並執行window.onerror()。onerror能夠接受多個參數。

window.onerror = function(message, source, lineno, colno, error) { ... }

函數參數：

*   message：錯誤信息（字符串）。可用於HTML onerror=""處理程序中的event。
*   source：發生錯誤的腳本URL（字符串）
*   lineno：發生錯誤的行號（數字）
*   colno：發生錯誤的列號（數字）
*   error：Error對象

若該函數返回true，則阻止執行默認事件處理函數，如異常信息不會在console中打印。沒有返回值或者返回值爲false的時候，異常信息會在console中打印

addEventListener('error')

監聽js運行時錯誤事件，會比window.onerror先觸發，與onerror的功能大致相似，不過事件回調函數傳參只有一個保存全部錯誤信息的參數，不能阻止默認事件處理函數的執行，但能夠全局捕獲資源加載異常的錯誤

window.addEventListener('error', function(event) { ... })

當資源（如img或script）加載失敗，加載資源的元素會觸發一個Event接口的error事件，並執行該元素上的onerror()處理函數。這些error事件不會向上冒泡到window，但能夠在捕獲階段被捕獲
所以若是要全局監聽資源加載錯誤，須要在捕獲階段捕獲事件
//圖片加載失敗使用默認圖片，依舊加載失敗超過三次使用base64圖片
window.addEventListener('error',function(e){
    let target = e.target, // 當前dom節點
        tagName = target.tagName,
        count = Number(target.dataset.count ) || 0, // 以失敗的次數，默認爲0
        max= 3; // 總失敗次數，此時設定爲3
    // 當前異常是由圖片加載異常引發的
    if( tagName.toUpperCase() === 'IMG' ){
        if(count >= max){
            target.src = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//AK3/ALYH+5hX6FV5N4Y/5GHwx/vyf+iJa9ZrysPhoYVShDZu/potDmwWFhhIzhT2bv6aLQ//Z';
        }else{
            target.dataset.count = count + 1;
            target.src = '//xxx/default.jpg';
        }
    }
},true)