javascript
JS事件代理
為什么要用事件委托：
一般來說，dom需要有事件處理程序，我們都會直接給它設事件處理程序就好了，那如果是很多的dom需要添加事件處理呢？比如我們有100個li，每個li都有相同的click點擊事件，可能我們會用for循環的方法，來遍歷所有的li，然后給它們添加事件，那這么做會存在什么影響呢？
在JavaScript中，添加到頁面上的事件處理程序數量將直接關系到頁面的整體運行性能，因為需要不斷的與dom節點進行交互，訪問dom的次數越多，引起瀏覽器重繪與重排的次數也就越多，就會延長整個頁面的交互就緒時間，這就是為什么性能優化的主要思想之一就是減少DOM操作的原因；如果要用事件委托，就會將所有的操作放到js程序里面，與dom的操作就只需要交互一次，這樣就能大大的減少與dom的交互次數，提高性能；
每個函數都是一個對象，是對象就會占用內存，對象越多，內存占用率就越大，自然性能就越差了（內存不夠用，是硬傷，哈哈），比如上面的100個li，就要占用100個內存空間，如果是1000個，10000個呢，那只能說呵呵了，如果用事件委托，那么我們就可以只對它的父級（如果只有一個父級）這一個對象進行操作，這樣我們就需要一個內存空間就夠了，是不是省了很多，自然性能就會更好。
例一：
如果說一個table中有10行10列，我要給里面的每一個td綁定click事件，我應該怎么做？可以像如下這樣：
$(function(){$("td").click(function(){alert($(this).text());}) })這樣當然沒問題，那么問題來了，如果這個table是10000行10000列，或者是動態加載tr的呢？行列太多，容易造成瀏覽器崩潰，動態加載的話后加載進來的td并沒有綁定事件。
那么如上問題該如何解決呢？這就要用到事件代理了，事件代理是利用了DOM的冒泡原理及目標元素，我來看一下代碼就明白了。
首選需要把觸發事件綁定在父元素上，就好比table，獲取目標元素之后，可以判斷如果是td那么就可以針對此標簽來操作：
HTML:
<table onclick="getCell();" ><tr><td>1</td><td>2</td><td>3</td></tr><tr><td>4</td><td>5</td><td>6</td></tr><tr><td>7</td><td>8</td><td>9</td></tr></table>JS:
function getTagName(e) {e = e || window.event;return e.target || e.srcElement;//其他，IE,獲取當前事件源}function getCell(e) {var target = getTagName(e);if(target.tagName.toLowerCase() =='td'){var test = target.textContent || target.innerText;alert(test);}}例二：
HTML
<ul id="ul1"><li>111</li><li>222</li><li>333</li><li>444</li></ul>這里用父級ul做事件處理，當li被點擊時，由于冒泡原理，事件就會冒泡到ul上，因為ul上有點擊事件，所以事件就會觸發，當然，這里當點擊ul的時候，也是會觸發的，那么問題就來了，如果我想讓事件代理的效果跟直接給節點的事件效果一樣怎么辦，比如說只有點擊li才會觸發，不怕，我們有絕招：
Event對象提供了一個屬性叫target，可以返回事件的目標節點，我們成為事件源，也就是說，target就可以表示為當前的事件操作的dom，但是不是真正操作dom，當然，這個是有兼容性的，標準瀏覽器用ev.target，IE瀏覽器用event.srcElement，此時只是獲取了當前節點的位置，并不知道是什么節點名稱，這里我們用nodeName來獲取具體是什么標簽名，這個返回的是一個大寫的，我們需要轉成小寫再做比較（習慣問題）：
JS
window.onload = function(){var oUl = document.getElementById("ul1");oUl.onclick = function(ev){var ev = ev || window.event;var target = ev.target || ev.srcElement;if(target.nodeName.toLowerCase() == 'li'){alert(123);alert(target.innerHTML);}}}例三：
HTML
<div id="box"><input type="button" id="add" value="添加" /><input type="button" id="remove" value="刪除" /><input type="button" id="move" value="移動" /><input type="button" id="select" value="選擇" /></div>JS
window.onload = function(){var oBox = document.getElementById("box");oBox.onclick = function (ev) {var ev = ev || window.event;var target = ev.target || ev.srcElement;if(target.nodeName.toLocaleLowerCase() == 'input'){switch(target.id){case 'add' :alert('添加');break;case 'remove' :alert('刪除');break;case 'move' :alert('移動');break;case 'select' :alert('選擇');break;}}}}例四：
<html><head><title>Mr企鵝先森</title><style>li{margin-left:30px;margin-top:30px;text-align: center;}</style><script type="text/javascript">window.onload = function(){function getTagName(e) {e = e || window.event;return e.target || e.srcElement;//其他，IE,獲取當前事件源}document.getElementById("table").addEventListener("click", function(e){var target = getTagName(e);if(target.tagName.toLowerCase() =='li'){var test = target.textContent || target.innerText;alert(test);}});}</script></head><div class="header"><ul class="table" id="table" style="list-style:none"><li style="background: red;width: 160px;">1</li><li style="background: green;width: 160px;">2</li><li style="background: blue;width: 160px;">3</li><li style="background: yellow;width: 160px;">4</li></ul></div></html>總結
- 上一篇： Excel 中的办公常用函数公式：EDA
- 下一篇： JS过滤表单数据中的特殊字符