本文参考了https://developer.mozilla.org/zh-CN/docs/Web/API/Page_Visibility_API

效果图：

在当前页面

离开当前页面

onfocus onblur（方法1）

window.onfocus = function() { 
  console.log("onfocus");
  document.title="在这";
};
window.onblur=function(){
  console.log("onblur");
  document.title="离开了";
}

通过改变标签页 title 可清楚看到变化

下面是html5提供的方法

visibilitychange 事件

浏览器标签页被隐藏或显示的时候会触发visibilitychange事件。经测试（Chorme），浏览器最小化也会触发该事件。可以用addEventListener()向document添加监听事件,也可以直接写成document.onvisibilitychange = function() {…}

1.document.hidden（方法2）

如果页面处于被认为是对用户隐藏状态时返回true，否则返回false。

使用addEventListener向document添加监听事件，false是addEventListener默认的一个参数，可以不写

function handleVisibilityChange() {
if (document.hidden) {
	document.title="离开了";
} else  {
 	document.title="在这";
}
}
document.addEventListener("visibilitychange", handleVisibilityChange, false);

2.document.visibilityState（方法3）

是一个用来展示文档可见性状态的字符串。可能的值：

visible : 页面内容至少是部分可见。 在实际中，这意味着页面是非最小化窗口的前景选项卡。

hidden : 页面内容对用户不可见。 在实际中，这意味着文档可以是一个后台标签，或是最小化窗口的一部分，或是在操作系统锁屏激活的状态下。

prerender : 页面内容正在被预渲染且对用户是不可见的(被document.hidden当做隐藏). 文档可能初始状态为prerender，但绝不会从其它值转为该值。

function handleVisibilityChange(){
  if(document.visibilityState=="hidden"){
    document.title="离开了";
  }
  if(document.visibilityState=="visible"){
    document.title="在这";
  }
}
document.addEventListener("visibilitychange", handleVisibilityChange, false);