javaScript高级教程(五) Event Flow

1.两个阶段三个模型：Netscape支持事件捕获，IE支持事件冒泡，w3c是先捕获后冒泡

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Event Flow</title>

    <link rel="stylesheet" type="text/css" href="style.css" />

    <script type="text/javascript">
function init(){
    function modifiedAddEvent( obj, type, fn ) {
        if(obj.addEventListener) {
            // The W3C Way
            obj.addEventListener( type, fn, true );      //最后一个参数设为true,则只有在事件传播的捕获阶段，指定的listener才会被调用

        } else if ( obj.attachEvent ) {
            //The Microsoft Way
            obj['e'+type+fn] = fn;
            obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
            obj.attachEvent( 'on'+type, obj[type+fn] );
        } else {
            return false;
        }
    }

    var counter = 0;

    // Grab all the unordered lists
    var lists = document.getElementsByTagName('ul');
    for(var i = 0 ; i < lists.length ; i++ ) {

        // Register an event listener for the click event
        modifiedAddEvent(lists[i],'click',function() {
            // Append the click order to the paragraph
            var append = document.createTextNode(':' + counter++);
            this.getElementsByTagName('p')[0].appendChild(append);

            // Change the class name to reveal the clicked elements
            this.className = 'clicked';
        });
    }

}
    </script>
</head>
<body onload="init()">
<h1>Event Flow</h1>

<div id="content">
    <ul id="list1">
        <li>
            <p>List 1 </p>
            <ul id="list2">
                <li>
                    <p>List 2 </p>
                    <ul id="list3">
                        <li>
                            <p>List 3 </p>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>

    <ul id="list4">
        <p>List 4 </p>
    </ul>
</div>

</body>

</html>

2.在chrome中运行

3.在IE8中运行

4.如果将上面的modifiedAddEvent函数中的 obj.addEventListener( type, fn, true)最后一个参数设为false,则在chrome中的结果与在IE8中的相同。

最后一个参数设为false，说明指定的listener是在冒泡阶段被调用。也就是说此时的事件模型与IE相同，所以两者结果相同。

5.把css文件附上。通过设置css,把list3放在了list4中。

 #content {
     width: 90%;
 }
 ul {
     padding:10px;
     margin:0;

     border:1px dotted black;
     background-color:white;
     list-style:none;
 }
 p {
     margin: 0;
     font-size:1.2em;
     font-weight: bold;
 }

 .clicked {
     background: #ffcf54;
 }

 #list1 {
     height:80px;
 }
 #list2 {
     margin-top: 10px;
     height:20px;
 }

 #list3 {
     position:absolute;
     top:190px;
     left:150px;
 }

 #list4 {
     margin-top:10px;
     height:100px;
 }