javascript 事件冒泡的补充

scroll在IE8-9中无法捕获,由于又不能冒泡,因此无法使用事件代理.它在FF下可以通过捕获来处理.

focus与blur事件在IE下可以通过focusin与focusout事件来模拟,但对于那些不能非表单元素或链接或图片等一般元素,我们需要给它设置tabIndex,才能让它拥有捕获焦点或失去焦点的能力.在某些非常新的标准浏览器中,可以使用DOMFocusIn,DOMFocusOut来模拟,但这种不能使用onXXX调用的事件随时可能废弃,因此我也不会用它们来模拟.focus,blur的事件代理.

<!doctype html>
<html>
  <head>
  
    <title>事件系统笔记 司徒正美</title>
   
    <style>
      div.test {
        width:400px;
        height:320px;
        margin:0 15px;
        background-color:#D6EDFC;
        overflow: auto;
        float:left;
      }
      div.test1{
        height: 200px;
        background: red;
      }

</style>

window.onload = function(){

var el = document.getElementById("test");
        el.addEventListener("DOMFocusIn",function(e){
           console.log(e.type)
        },false)

el.addEventListener("DOMFocusOut",function(e){
           console.log(e.type)
        },false);

el.addEventListener("focus",function(e){
          console.log(e.type)
        },false)

el.addEventListener("blur",function(e){
          console.log(e.type)
        },false);
     
}

</script>
  </head>
  <body>
    <h1>mouseenter与mouseleave</h1>
    <div class="test" id="test" tabIndex="-1" >
      <div class="test1" tabIndex="-1" ></div>
    </div>

</body>
</html>

scroll 只能用于两个DIV之间或window中,这时要求存在滚动条.在IE中,不能冒泡也无法用捕获,在标准浏览器中冒泡情况也非常混乱,只重要的是要判定是否存在滚动条,因此也不打算支持其事件代理.

        //让IE与w3c支持focus与blur与select的代理
        "focus_focusin,blur_focusout,select_selectstart".replace(/\w+/g,function(types){
            types = types.split("_");
            events.special[  types[0] ]  = {
                liveType: DOC.dispatchEvent ? types[0] : types[1],
                livePhase:!!DOC.dispatchEvent,
                liveSetup: function(node, type, _, phase){
                    enableFocusin(node);
                    dom.bind(node,type,function(e){
                        e = events.fix(e);
                        dom.log("让IE与w3c支持focus与blur与select的代理")
                        e.type = types[0];
                        events.handle.call(this,e);
                    },phase);
                }
            }
        });

posted on 2011-05-27 22:19 司徒正美阅读(1923) 评论(1) 收藏举报

刷新页面返回顶部

Ruby's Louvre

导航

公告

javascript 事件冒泡的补充