关于浏览器标签页间切换触发的事件的理解

Question

今天在zealer上看视频发现一个小细节，当用户切换到其他标签页时，页面的视频会暂停。于是在网上查了资料。http://blog.csdn.net/cczhumin...代码如下：var hiddenProperty = 'hidden' in document ? 'hidden' :        'webkitHidden' in document ? 'webkitHidden' :        'mozHidden' in document ? 'mozHidden' :        null;var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');var onVisibilityChange = function(){    if (!document[hiddenProperty]) {            console.log('页面非激活');    }else{        console.log('页面激活')    }}document.addEventListener(visibilityChangeEvent, onVisibilityChange);我对这段代码不是很理解，第一行大概是针对不同浏览器写的兼容吧，到了第二行就不知道为什么要把hiddenProperty替换成visibilitychange。然后就是document.hidden的含义不是很明白，求解！

Answer 1

1. 第一行你想的没错就是兼容。

2. 第二行把'hideen'替换成'visibilitychange'之后还要赋值给变量var visibilityChangeEvent的，之所以要这么换是要承接第一行拿到的浏览器前缀，比如第一行如果是'webkitHidden'的话那这个就会是'webkitvisibilitychange'了。