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>
