谷歌和火狐的瀏覽器表現差異（1）

作爲主流瀏覽器的谷歌和火狐，其內核在一些問題處理上有一些差異，比如一些樣式、事件。

就事件來說，監聽界面切換就是差異之一。

就原因來分析，就是二者對於document和window的範圍界定有差異，火狐認爲瀏覽器tab就是window，所以在切換tab時可以觸發到window的事件，而谷歌則認爲tab對應的是ducument，可視區域纔是window範圍。具體示例：

場景：監聽頁面切換，在切換回頁面時刷新數據。

可用事件：window的blur+focus，以及document的visibilityChange。

具體表現：1.只用document--visibilityChange，兩者都OK；

2.只用window--blur+focus，谷歌在切換瀏覽器tab頁時無法觸發。

當然，兩者是有差別的，一個是切換是否可見，比如最小化、切換tab、切換窗口等；一個是window的聚焦與焦點移出。

代碼示例：

 1 document.addEventListener('visibilitychange', function(){  
 2     if (document.hidden){  
 3         document.title ='I am here! Q~~Q';  
 4         clearTimeout(titleTime);  
 5     }else{  
 6         document.title = 'Welcome (o°ω°o) happy ';  
 7         titleTime = setTimeout(function() {  
 8             document.title = OriginTitile;  
 9         }, 1000); // 2秒後恢復原標題  
10     }  
11 }); 

1 window.addEventListener('blur', function(){  
2    
3 }); 
4 window.addEventListener('focus', function(){  
5    
6 }); 

當然，使用實名函數達到避免重複綁定或綁定前先移除舊的事件的目的。