欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

事件的传播

程序员文章站 2022-06-23 22:55:09
事件的传播 ~~~javascript ~~~ ......

事件的传播

<!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>