焦点事件会在页面元素获得或失去焦点时触发。利用这些事件并与document.hasFocus()方法及document.activeElement属性配合，可以知晓用户在页面上的行踪。有以下6个焦点事件。

• blur：在元素失去焦点时触发。这个事件不会冒泡，所有浏览器都支持它。
• DOMFocusIn：在元素获得焦点时触发。这个事件与HTML事件focus等价，但它冒泡。只有Opera支持这个事件。DOM3级事件废弃了DOMFocusIn，选择了focusin。
• DOMFocusOut：在元素失去焦点时触发。这个事件是HTML事件blur的通用版本。只有Opera支持这个事件。DOM3级事件废弃了DOMFocusOut，选择了focusout。
• focus：在元素获得焦点时触发。这个事件不会冒泡，所有浏览器都支持它。
• focusin：在元素获得焦点时触发。这个事件与HTML事件focus等价，但它冒泡。支持这个事件的浏览器有IE5.5+、Safari 5.1+、Opera 11.5+和Chrome。
• focusout：在元素失去焦点时触发。这个事件是HTML事件blur的通用版本。支持这个事件的浏览器有IE5.5+、Safari 5.1+、Opera 11.5+和Chrome。

这一类事件中最主要的两个是focus和blur，它们都是JavaScript早期就得到所有浏览器支持的事件。这些事件的最大问题是它们不冒泡。因此，IE的focusin和focusout与Opera的DOMFocusIn和DOMFocusOut才会发生重叠。IE的方式最后被DOM3级事件采纳为标准方式。当焦点从页面中的一个元素移动到另一个元素，会依次触发下列事件：

• (1) focusout 在失去焦点的元素上触发
• (2) focusin 在获得焦点的元素上触发
• (3) blur 在失去焦点的元素上触发
• (4) DOMFocusOut 在失去焦点的元素上触发
• (5) focus 在获得焦点的元素上触发
• (6) DOMFocusIn 在获得焦点的元素上触发

其中，blur、DOMFocusOut和focusout的事件目标是失去焦点的元素，而focus、DOMFocusIn和focusin的事件目标是获得焦点的元素。要确定浏览器是否支持这些事件，可以使用如下代码：

var isSupported = document.implementation.hasFeature("FocusEvent", "3.0");

座机：-显示str的值

<script type="text/javascript">
(function(){
  function isCompatible(other){
    if(other===false || !Array.prototype.push || !Object.hasOwnProperty || !document.createElement || !document.getElementsByTagName){
      return false;
    }
    return true;
  }

  function $(){
    var elements=new Array();
    for(var i=0;i<arguments.length;i++){
      var element=arguments[i];
      if(typeof element=="string"){element=document.getElementById(element);}
      if(arguments.length==1){return element;}
      elements.push(element);
    }
    return elements;
  }

  function addEvent(node,type,listener){
    if(!isCompatible()) return false;
    if(!(node=$(node))) return false;
    if(node.addEventListener){
      node.addEventListener(type,listener,false);
      return true;
    }else if(node.attachEvent){
      node["e"+type+listener]=listener;
      node[type+listener]=function(){node["e"+type+listener](window.event);};
      node.attachEvent("on"+type,node[type+listener]);
      return true;
    }
    return false;
  }
  var str="";
  addEvent(document.querySelector("input[name='quhao']"),"focusout",function(event){
    event=event||window.event;
    var target=event.target||event.srcElement;
    str=str+event.type+" "+target.name+" "+target.nodeName+"\r\n";
  });

  addEvent(document.querySelector("input[name='zuoji']"),"focusin",function(event){
    event=event||window.event;
    var target=event.target||event.srcElement;
    str=str+event.type+" "+target.name+" "+target.nodeName+"\r\n";
  });

  addEvent(document.querySelector("input[name='quhao']"),"blur",function(event){
    event=event||window.event;
    var target=event.target||event.srcElement;
    str=str+event.type+" "+target.name+" "+target.nodeName+"\r\n";
  });

  addEvent(document.querySelector("input[name='quhao']"),"DOMFocusOut",function(event){
    event=event||window.event;
    var target=event.target||event.srcElement;
    str=str+event.type+" "+target.name+" "+target.nodeName+"\r\n";
  });

  addEvent(document.querySelector("input[name='zuoji']"),"focus",function(event){
    event=event||window.event;
    var target=event.target||event.srcElement;
    str=str+event.type+" "+target.name+" "+target.nodeName+"\r\n";
  });

  addEvent(document.querySelector("input[name='zuoji']"),"DOMFocusIn",function(event){
    event=event||window.event;
    var target=event.target||event.srcElement;
    str=str+event.type+" "+target.name+" "+target.nodeName+"\r\n";
  });

  addEvent(document.getElementById("jsButton1"),"click",function(event){
    alert(str);
  });
})();
</script>