JS Learning Summary----Event delegates and event proxies

1. What is an event delegate/event Agent

Using the bubbling propagation mechanism of events (triggering the behavior of the current element, the related behavior of all the elements of its parent will be triggered), if there are many elements in a container to bind the point-click event, we do not need to bind each other, only to the outermost container to bind a click event, when this method executes, Different actions are performed by the distinction of the event source.

Specific small cases are as follows:　　

<!     DOCTYPE html>{margin:0; padding:0; Font-size:14px; } html,body{Width:100%; Height:100%;        Overflow:hidden;            } #box {Position:absolute; Left:50%;            top:50px;            width:100px;            height:30px; Margin-left:-50px; Line-height:30px; Text-Align:center;        border:1px solid #2489cc;            } #mark {Position:absolute;            top:30px; Left:-1px;            width:300px;            height:100px; Line-height:100px; Text-Align:center;            Background: #ffe470;        border:1px solid #2489cc; }    </style>View Shopping Cart details</div> </div> <script>varMark = document.getElementById (' Mark '); Document.body.onclick=function(e) {e= e | |window.event; E.target= E.target | |e.srcelement; //If you click on a box or a span under #box, we determine if Mark shows it, show it to hide it, and let it show            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; } Mark.style.display= = = "None"        }    </script></body>
JS Learning Summary----Event delegates and event proxies