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);
事件委托：当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。
原理：浏览器的事件冒泡机制。
时间： 2024-10-23 09:48:58