胖在一方

出得厅堂入得厨房的胖子

导航

JavaScript(十八) Dom Event 一

Posted on 2008-04-24 11:51  胖在一方  阅读(415)  评论(0)    收藏  举报
    事件发生的顺序(也就是事件流)是IE4.0与Netscape4.0在事件支持上的主要差别
    
    IE的事件处理机制
    IE上事件的解决方案是绰号为冒泡(dubbed bubbling)的技术,冒泡型事件的基本思想是,事件按照从最特定的目标 到最不特定的目标(document对象)的顺序触发,例如如果有下面的页面
    
            <html>
                <head></head>
                <body onclick="handleClick()">
                    <div onclic="handleClick()">Click Me!</div>
                </body>
            </html>
    如果用户使用IE5.5点击则事件按照以下顺序"冒泡" div -> body -> document 流程的方法之所以被称为冒泡,因为事件是按照DOM层次象水泡一样不断的上升到顶端. 在IE6中, html元素也可以接受到冒泡的事件. 如果不确定用户用的是IE5.5还是IE 6.0,最好避免在的<HTML/>元素级别上处理事件.

Netscape Navigator 的事件处理机制
    IE 4.O 使用冒泡(dubbed bubbling)型事件,相对的Netscape Navigator 4.0 使用了另一种称为捕获型事件 (event capturing )的解决方案.事件的捕获和冒泡刚好是相反的两种过程 捕获型事件: 事件从最不精确的对象(document)开始触发,然后到最精确) 再次使用前面的例子,如果用户点击
元素,事件按照下面的路径传播. documen -> div

DOM 事件流
    DOM同时支持两种事件流,捕获型和冒泡型事件.但是捕获型事件先发生.两种事件流会触及DOM中的所有对象. 从document对象开始,也在document对象结束(大部分兼容的游览器回继续将事件的捕获/冒泡延续到window对象) 
    再考虑前面的例子， 
    事件流为: window -> document -> body -> div -> div -> body -> document -> window
                    1                  2             3         4         5         6             7                 8 
    (前面4个事件为捕获过程,后面的为冒泡过程) 注意因为事件的目标(元素),是最精确的元素(于是，在DOM树中最深),是上他会接收两次事件,一次在捕获过程中, 另一次在冒泡过程中。 
    DOM事件模型最独特的性质是,文本节点也会触发事件(IE中不会),所以如果点击例子中的文本Click Me,实际的事件流, 应该为以下: 
    window -> document -> body -> div -> (text) -> div ->body -> document -> window 
        1                 2             3          4           5         6         7             8                 9