让人省心的事件委托
事件委托:利用冒泡的原理把實踐添加到父元素級別上，觸發執行效果。
時間委托優點：
? ? ? 1.提高性能，不用for循環遍歷所有li，節省性能。
? ? ? 2.新添加的元素還會有原來之前的事件。
先看時間委托提高的性能吧，一個常見的效果，鼠標經過<li>列表背景變紅，鼠標移走取消背景色。下面代碼是沒使用時間委托：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>testcss</title> <style></style> <script type="text/javascript"> window.οnlοad=function(){var oul=document.getElementsByTagName('ul')[0];var oli=oul.getElementsByTagName('li');for(var i=0;i<oli.length;i++){oli[i].οnmοuseοver=function(){this.style.background='red';};oli[i].οnmοuseοut=function(){this.style.background='';};}} </script> </head> <body><input type='button' value='添加' id='input1'/><ul><li>demo</li><li>demo</li><li>demo</li><li>demo</li><li>demo</li></ul> </body> </html>很顯然那個for循環就是性能的主要浪費者，就這5個<li>標簽還好，倘若有成千上百個呢？使用時間委托就不用考慮這些了：
oul.οnmοuseοver=function(ev){var ev=ev||window.event; //ev.target代表事件源，事件發生在誰身上誰就是事件源，ev.srcElement是兼容IEvar target=ev.target||ev.srcElement;<span style="white-space:pre"> </span>//if(target.is("li")) //判斷是否為li標簽if(target.nodeName.toLowerCase()=='li')//判斷事件源是否為<li>，目的是為排除<ul>,防止鼠標經過“大的”<ul>時發生變色。{target.style.background='red';}}oul.οnmοuseοut=function(ev){var ev=ev||window.event;var target=ev.target||ev.srcElement;if(target.nodeName.toLowerCase()=='li'){target.style.background='';}}這樣就不用使用for循環遍歷了。
第二個優點：新添加的元素還會有原來之前的事件。也就是說用for循環的方法只能對現有的標簽實現效果，對于后來新添加的標簽就不能為例了，而用時間委托，只要符合之前設定的標簽，那么新添加的標簽生來就有之前定義的事件效果。下面在網頁中添加一按鈕，點擊按鈕添加一些新的<li>標簽：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>testcss</title> <style></style> <script type="text/javascript"> window.οnlοad=function(){var oul=document.getElementsByTagName('ul')[0];var oli=oul.getElementsByTagName('li');var oinput=document.getElementById('input1');oinput.οnclick=function(){ //點擊按鈕插入新<li>標簽var oli=document.createElement('li');oli.innerHTML='我是新標簽'; //注意：此句代碼應寫在appendChild()前面，能節省性能oul.appendChild(oli);};oul.οnmοuseοver=function(ev){var ev=ev||window.event;//ev.target代表事件源，事件發生在誰身上誰就是事件源，ev.srcElement是兼容IEvar target=ev.target||ev.srcElement;if(target.nodeName.toLowerCase()=='li'){target.style.background='red';}}oul.οnmοuseοut=function(ev){var ev=ev||window.event;var target=ev.target||ev.srcElement;if(target.nodeName.toLowerCase()=='li'){target.style.background='';}}} </script> </head> <body><input type='button' value='添加' id='input1'/><ul><li>11</li><li>22</li><li>33</li><li>44</li><li>55</li></ul> </body> </html>以上代碼運行效果如下圖所示，新插入的標簽依然與生俱來之前的事件：轉載于:https://www.cnblogs.com/chayangge/p/4288692.html
總結
- 上一篇： C# 导出word文档及批量导出word
- 下一篇： 适用响应式 Web UI 框架