JavaScript 事件代理绑定 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8 <style>
 9     .out li{line-height: 25px;width: 200px; padding: 5px; border: 1px solid #ccc; margin: 10px; cursor: pointer;}
10 </style>
11     <ul class="out">
12         <li>列表01</li>
13         <li>列表02</li>
14         <li>列表03</li>
15         <li>列表04</li>
16         <li>列表05</li>
17         <li>列表06</li>
18         <li>列表07</li>
19     </ul>
20 
21     <script>
22 
23         function bindEvent(dom,event,listeners){
24             addEvent(dom,event,function(e){
25                 var e=e||window.event,
26                         src= e.target|| e.srcElement,returnVar;
27                 while(src || src!=dom){
28                     returnVar=listeners({
29                         e:e,
30                         src:src
31                     });
32 
33                     if(returnVar===false){
34                         break;
35                     }
36                 }
37             })
38         }
39 
40         function addEvent(obj,type,handle){
41 
42             function createDelegate(handle,context){
43                 return function(){
44                     handle.apply(context,arguments);
45                 }
46             }
47             //兼容浏览器
48             if(obj.addEventListener){
49                 var handler=createDelegate(handle,obj);
50                 obj.addEventListener(type,handler,false);
51             }else if(obj.attach){
52                 var handler=createDelegate(handle,obj);
53                 obj.attach('on'+type,handler);
54             }
55         }
56 
57 
58         var ls={};
59         var ulDom=document.querySelector('.out');
60         bindEvent(ulDom,'click',function(opts){
61             console.log(opts.src.innerHTML);
62             return false;
63 
64         });
65 
66 
67     </script>
68 </body>
69 </html>

 

posted @ 2016-07-12 17:34  lokou  阅读(199)  评论(0)    收藏  举报