前言

对于页面上的有些事件，例如动画，需要在页面切换的时候暂停，切换回来的时候恢复，或者一些提示消息，需要在页面处在激活状态的时候取消提示，切换的时候才显示提示消息，我们就需要监听页面的切换标签页或者失去焦点的事件。

传统做法

一般只需要监听页面的聚焦和失焦的事件就可以了：

window.onfocus = function() {
    isShine = false;
};
window.onblur = function() {
    isShine = true;
};
// for IE
document.onfocusin = function() {
    isShine = false;
};
document.onfocusout = function() {
    isShine = true;
};

但是经过我自己实际测试，这个方法并不能很好的检测页面的切换事件，有时候会出现没有响应的情况，那么有没有更好的方法来检测页面的切换事件呢？我们可以使用H5的visibilitychange和document.hidden来进行判断即可。

使用

因为不同的浏览器的visibilitychange的名称可能不一样，所以我们首先来获取一下当前浏览器支持的visibilitychange的名称：

var stateKey, 
    eventKey, 
    keys = {
        hidden: "visibilitychange",
        webkitHidden: "webkitvisibilitychange",
        mozHidden: "mozvisibilitychange",
        msHidden: "msvisibilitychange"
    };
    for (stateKey in keys) {
        if (stateKey in document) {
            eventKey = keys[stateKey];
            break;
        }
    }

同理，你还需要获取当前浏览器的document.hidden的名称，在循环代码中加入：

    var propertyKey = "";
    for (stateKey in keys) {
        if (stateKey in document) {
            propertyKey =  stateKey ;
            eventKey = keys[stateKey];
            break;
        }
    }

最后只需要添加事件监听即可：

document.addEventListener(eventKey, function(){
    //如果是聚焦
    if(!document[propertyKey]){
    //你的代码
    }else{
    //你的代码
    }
});

参考资料