Javascript 事件冒泡 事件代理

事件冒泡是事件代理的基础 ,其实在DOM的操作中冒泡无处不再，可能自己都没有感觉到～

Q1：什么是事件冒泡

　　就像有一栋的房子有18层，最底层的人说着火了，从下到上，将消息传上去，同时每一层的人都会对着火了这个消息作出不同或相同的处理，也可以不处理。整个过程就像冒泡一样。

example：

Buble 
<!DOCTYPE html>
<html>
    <head>
        <title>事件冒泡</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style>
        div{background-color:#fff;}
        #d1{width:400px;height:400px;border:1px solid #000;margin:50px 50px;}
        #d2{width:300px;height:300px;border:1px solid #000;margin:50px 50px;}
        #d3{width:200px;height:200px;border:1px solid #000;margin:50px 50px;}
        #d4{width:100px;height:100px;border:1px solid #000;margin:50px 50px;}
        </style>
    </head>
    <body>
        <div id="d1">
            <div id="d2">
                <div id="d3">
                    <div id="d4">
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            document.getElementById("d4").onclick=function(){this.style.backgroundColor="yellow";alert("get in d4)};
            document.getElementById("d3").onclick=function(){this.style.backgroundColor="green";alert("get in d3")};
            document.getElementById("d2").onclick=function(){this.style.backgroundColor="black";alert("get in d2")};
            document.getElementById("d2").onclick=function(){this.style.backgroundColor="black";alert("get in d1")};
        </script>
    </body>
    
</html>

Q2:什么是事件代理

　　同样是这个房子，每一层的人都作出放应，这回造成资源的浪费，如果统一交给最顶层的人处理，有时候会更加的有效率。

example：

event proxy 
<!DOCTYPE html>
<html>
    <head>
        <title>事件冒泡</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <style>
        div{background-color:#fff;}
        #d1{width:400px;height:400px;border:1px solid #000;margin:50px 50px;}
        #d2{width:300px;height:300px;border:1px solid #000;margin:50px 50px;}
        #d3{width:200px;height:200px;border:1px solid #000;margin:50px 50px;}
        #d4{width:100px;height:100px;border:1px solid #000;margin:50px 50px;}
        </style>
    </head>
    <body>
        <div id="d1">
            <div id="d2">
                <div id="d3">
                    <div id="d4">
                    </div>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            window.onload=function(){
                    var nav=document.getElementById("d1");
                    nav.onclick=function(){
                            var e=event||window.event;
                            target=e.srcElement?e.srcElement:e.target;
                            if(target.id=="d1"){target.style.backgroundColor="black";}
                            else if(target.id=="d2"){target.style.backgroundColor="green";}
                            else if(target.id=="d3"){target.style.backgroundColor="red";}
                            else if(target.id=="d4"){target.style.backgroundColor="gray"}
                    }
            }
    </script>
    </body>
    
</html>
posted @ 2012-12-03 13:59  Epirus  阅读(221)  评论(0)  编辑  收藏  举报