Event Delegate Small demo (native version)

<style type= "Text/css" > Body, div, span{margin:0;padding:0;font-family:"\5fae\8f6f\96c5\9ed1", Helvetica, Sans-serif;font-size:14px; }html, Body{width:100%;Height:100%;Overflow:Hidden; }#box{position:Absolute; Left:50%;Top:50px;Margin-left:-50px;width:100px;Height:30px;Line-height:30px;text-align:Center;Border:1px solid #2489ce; }#mark{position:Absolute;Top:30px; Left:-1px;width:300px;Height:100px;Line-height:100px;text-align:Center;background:#ffe470;Border:1px solid #2489ce; }</style>

<DivID= "box">    <span>Shopping Cart</span>    <DivID= "Mark"style= "Display:none;">View details in the shopping cart</Div></Div>

<Scripttype= "Text/javascript">    varMark=document.getElementById ("Mark"); Document.body.onclick= function(e) {e=e||window.event; E.target=E.target||e.srcelement; //If you click on #box or a span under #box, we determine if Mark shows it, show it to hide it, and hide it to show it .        if(E.target.id=== "Box" ||(E.target.tagname.tolowercase ()=== "span" &&e.target.parentnode.id=== "Box")) {            if(Mark.style.display=== "None") {Mark.style.display= "Block"; } Else{Mark.style.display= "None"; }            return; }        //-- If the event source is #mark, do not take any action        if(E.target.id=== "Mark") {            return; }        //and above are not words, we directly let #mark hideMark.style.display= "None"; };</Script>

Event Delegate Small demo (native version)