×

JS—事件类型(焦点事件、鼠标事件(部分))

96
Miss____Du
2014.12.18 09:47* 字数 849
  • 焦点事件
    焦点事件会在页面元素获得或失去焦点时触发。
    确定浏览器是否支持该类事件!

              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()也无法避免冒泡的现象。

萌妹子学习web前端
Web note ad 1