简单事件委托

事件委托与浏览器事件冒泡机制详解

最新推荐文章于 2025-09-10 19:44:49 发布

转载最新推荐文章于 2025-09-10 19:44:49 发布 · 45 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/HiuYanChong/p/5307776.html

文章标签：

#javascript #ViewUI

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <title>事件委托</title>
 5     <meta http-equiv="Content-type" content="text/html" charset="utf-8">
 6 </head>
 7 <body>
 8     <ul>
 9         <li id="1">1</li>
10         <li id="2">2</li>
11         <li id="3">3</li>
12         <li id="4">4</li>
13     </ul>
14     <script type="text/javascript" src="delegate.js"></script>
15 </body>
16 </html>

 1 function addEvent(func) {
 2     var old = window.onload;
 3     if (typeof old == "function") {
 4         window.onload = func;
 5     } else {
 6         old;
 7         func();
 8     }
 9 }
10 function delegationForUl () {
11     var ul = document.getElementsByTagName('ul')[0];
12     ul.addEventListener("click", function(e) {
13         if (e.target && e.target.nodeName == "LI") {
14             alert(e.target.id);
15         }
16     });
17 }
18 
19 addEvent(delegationForUl);