在今年秋招的笔试题中，有部分小伙伴遇到了这样一个题：写一段代码用于判断用户是否离开当前页面
不出所料，这个问题难倒了一大批的面试者
其实这考查的是html5中一个新的事件——visibilitychange，当用户进入页面或者离开页面时，都会触发该事件
与此同时，在document对象上也新增了一个属性 visibilityState，它有两个值：分别为 visible 和 hidden ，顾名思义，当用户在使用当前页面时，该属性的值为 visible ；当用户离开页面时，该属性的值为 hidden
我们结合上面个知识点，就可以写一段代码，用来判断用户是否离开当前页面了
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>判断用户是否离开页面</title></head><body> <script> /* 实现该功能：当用户离开页面时, 打印 '离开页面' ; 当用户回到页面时, 打印 '回到页面' */ document.addEventListener('visibilitychange', function() { if(document.visibilityState == 'hidden') { console.log('离开页面'); } else { console.log('回到页面'); } })</script></body></html>
我们来看一下实际的效果吧
扩展一下应用的话，我们可以在事件处理函数中写入一段Ajax代码，用于在用户离开页面时向服务端发送一条信息，就可以实现监控用户在网页中考试答题作弊情况了
