JS—事件类型（焦点事件、鼠标事件（部分））

• 焦点事件
  焦点事件会在页面元素获得或失去焦点时触发。
  确定浏览器是否支持该类事件！

            var isSupported=document.implementation.hasFeature('FocusEvent','3.0');
            alert(isSupported)//true or false
  

• blur-在元素失去焦点时触发。
  【特点】不冒泡，所有浏览器都支持。

• focus-在元素获得焦点时触发。
  【特点】冒泡，所有浏览器都支持。

• focusin-在元素获得焦点时触发。
  【特点】冒泡，基本上现代浏览器支持。（IE5.5+，safari5.1+，opera11.5+，chrome）

• focusout-在元素失去焦点时触发
  【特点】冒泡，基本上现代浏览器支持。（IE5.5+，safari5.1+，opera11.5+，chrome）

• 当焦点从一个元素移动到另一个元素，会依次触发下列事件。
  focusout、focusin、blur、focus

【需要注意】虽然focus与blur不冒泡，但是却可以在捕获阶段侦听到它们。

---

• 鼠标事件
  鼠标是计算机（非移动设备）最常用的定位方式，DOM3级事件中规定了9个鼠标事件。
  先判断浏览器是否支持这类鼠标事件
  var isSupported=document.implementation.hasFeature('MouseEvent','3.0');
  alert(isSupported)//true or false
  var isSupported=document.implementation.hasFeature('MouseEvent','2.0');
  alert(isSupported)//true or false

• mousedown
  按下任意鼠标按钮时
  mouseover
  用户释放鼠标按钮时
  click
  当按下鼠标左键，或者按下enter键
  dbclick
  双击左键【DOM3加入】
  mouseenter
  鼠标光标从元素外部首次移动到元素内部时触发，但是移动到该元素内部子元素不触发【DOM3加入，不冒泡】
  mouseleave
  鼠标光标从元素内部首次移动到元素外部时触发，但是移动到该元素内部子元素不触发【DOM3加入，不冒泡】
  mousemove
  鼠标在元素内部移动时重复触发
  mouseover
  鼠标从元素外部首次移入另一个元素边界之内
  mouseout
  鼠标从元素的内部移到元素外部，移入的另一个元素可以是前一个元素的外部，也可能是这个元素的子元素。

• 【测试一下与鼠标移入移出有关的事件】
  var div1=document.getElementById("d1");
  var div2=document.getElementById("d2");
  var div3=document.getElementById("d3");
  div2.onmouseenter=function(){
  alert('mouseenter')
  };
  div2.onmouseleave=function(){
  alert('mouseleave')
  }
  div2.onmouseover=function(){
  alert('mouseover');
  }
  div2.onmouseout=function(){
  alert('mouseout')
  }

粉：div1；棕：div2；绿：div3

只定义了div2即棕色的那个div的事件
【解释enter与leave】：当鼠标由粉移向棕色时，显示enter，鼠标由棕移向绿时，不显示leave与enter。当移出粉色时，显示leave。
【解释over与out】：当鼠标由粉移向棕色时，显示over，鼠标由棕移向绿时，显示out在显示over，鼠标由绿移向棕时，显示out载显示over。为什么会显示呢？是因为事件冒泡，由棕移向绿时会触发div3的over事件，但是div3并没有定义，所以向上冒泡到div2。所以会显示div2的over事件。
【总结】mouseenter与mouseleave是IE提出的事件，不冒泡。但是mouseover与mouseout事件则通过简单的e.stopPropagation()也无法避免冒泡的现象。