JavaScript 事件代理绑定

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title></title>
 </head>
 <body>
 <style>
     .out li{line-height: 25px;width: 200px; padding: 5px; border: 1px solid #ccc; margin: 10px; cursor: pointer;}
 </style>
     <ul class="out">
         <li>列表01</li>
         <li>列表02</li>
         <li>列表03</li>
         <li>列表04</li>
         <li>列表05</li>
         <li>列表06</li>
         <li>列表07</li>
     </ul>

     <script>

         function bindEvent(dom,event,listeners){
             addEvent(dom,event,function(e){
                 var e=e||window.event,
                         src= e.target|| e.srcElement,returnVar;
                 while(src || src!=dom){
                     returnVar=listeners({
                         e:e,
                         src:src
                     });

                     if(returnVar===false){
                         break;
                     }
                 }
             })
         }

         function addEvent(obj,type,handle){

             function createDelegate(handle,context){
                 return function(){
                     handle.apply(context,arguments);
                 }
             }
             //兼容浏览器
             if(obj.addEventListener){
                 var handler=createDelegate(handle,obj);
                 obj.addEventListener(type,handler,false);
             }else if(obj.attach){
                 var handler=createDelegate(handle,obj);
                 obj.attach('on'+type,handler);
             }
         }

         var ls={};
         var ulDom=document.querySelector('.out');
         bindEvent(ulDom,'click',function(opts){
             console.log(opts.src.innerHTML);
             return false;

         });

     </script>
 </body>
 </html>