事件的传播

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #box1 {
                width: 300px;
                height: 300px;
                background-color: aliceblue;
            }

            #box2 {
                width: 200px;
                height: 200px;
                background-color: skyblue;
            }
            #box3 {
                width: 100px;
                height: 100px;
                background-color: yellow;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var box1=document.getElementById("box1");
                var box2=document.getElementById("box2");
                var box3=document.getElementById("box3");

                bind(box1,"click",function(){alert("box1")})
                bind(box2,"click",function(){alert("box2")})
                bind(box3,"click",function(){alert("box3")})

                // 事件的传播
                //   - 微软公司认为时间应该由内向外传播，也就是事件触发时，应该先出发当前元素上的事件
                //      然后再向当前元素的祖先元素上传播，也就是说事件应该在冒泡阶段执行
                //   - 网景公司认为事件应该是由外向内传播的，也就是当前事件触发时，应该先触发当前元素的最外层的祖先元素的事件
                //   - W3C综合了两个公司的方案，将事件传播分成三个阶段
                //      1.捕获阶段
                //      - 在捕获阶段从最外层的祖先元素，向目标元素进行事件的捕获，但是默认此时不会触发事件
                //   2.目标阶段
                //         - 事件捕获到目标元素
                //   3.冒泡阶段
                //      - 事件从目标元素向他的祖先元素传递，依次触发祖先元素
                //   - 如果希望在捕获阶段就触发事件，可以将addEventListenter()的第三个参数设置为true
                //      一般情况下，我们不会再捕获阶段触发事件
            }
            function bind(obj,eventStr,callback){
                if(obj.addEventListener){
                    // 大部分浏览器兼容的方式
                    obj.addEventListener(eventStr,callback,false);
                }else{
                    /*
                    this是谁由调用方式决定的
                    callbank.call(obj)
                    */
                    // IE8及以下
                    obj.attachEvent("on"+eventStr,function(){
                        // 在匿名函数中调用回掉函数
                        callback.call(obj);
                    });
                }
            }
        </script>
    </head>
    <body>
        <div id="box1">
            <div id="box2">
                <div id="box3"></div>
            </div>
        </div>

    </body>
</html>