事件流解析-优快云博客

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件捕获和事件冒泡</title>
</head>
<body>
    <!--事件流:描述的是从页面中获取事件的顺序
        IE:事件冒泡
        Netscape:事件捕获
    -->
    <!--事件捕获：不太具体的节点应该更早接受到事件,而最具体的事件最后接受到事件)
      比如:点击cancel按钮后  先触发container点击事件然后在触发cancel的点击事件
      -->
    <!--事件冒泡:最具体的事件触发后(最底层的事件)，然后逐级向上触发各事件(你的上级。。。到最后的document级)
    比如:点击cancel后，先触发cancel的点击事件，再触发container的点击事件
    IE8以下支持事件
    -->
    <div id="container" style="width:300px;height:300px; border: 1px solid red;">
        <input type="button" id="cancel" value="cancel"/>
        <input type="button" id="send" value="send"/>
    </div>
<script type="text/javascript">


    var container=document.getElementById("container");
    container.onclick=function(){
        alert("container");
    }

    var cancel=document.getElementById("cancel");
    cancel.onclick=function(){
        alert("cancel");
    }

    var send=document.getElementById("send");
    send.onclick=function(){
        alert("send");
    }
</script>
</body>
</html>