javascript
JS事件代理
為什么要用事件委托：
一般來說，dom需要有事件處理程序，我們都會(huì)直接給它設(shè)事件處理程序就好了，那如果是很多的dom需要添加事件處理呢？比如我們有100個(gè)li，每個(gè)li都有相同的click點(diǎn)擊事件，可能我們會(huì)用for循環(huán)的方法，來遍歷所有的li，然后給它們添加事件，那這么做會(huì)存在什么影響呢？
在JavaScript中，添加到頁面上的事件處理程序數(shù)量將直接關(guān)系到頁面的整體運(yùn)行性能，因?yàn)樾枰粩嗟呐cdom節(jié)點(diǎn)進(jìn)行交互，訪問dom的次數(shù)越多，引起瀏覽器重繪與重排的次數(shù)也就越多，就會(huì)延長(zhǎng)整個(gè)頁面的交互就緒時(shí)間，這就是為什么性能優(yōu)化的主要思想之一就是減少DOM操作的原因；如果要用事件委托，就會(huì)將所有的操作放到j(luò)s程序里面，與dom的操作就只需要交互一次，這樣就能大大的減少與dom的交互次數(shù)，提高性能；
每個(gè)函數(shù)都是一個(gè)對(duì)象，是對(duì)象就會(huì)占用內(nèi)存，對(duì)象越多，內(nèi)存占用率就越大，自然性能就越差了（內(nèi)存不夠用，是硬傷，哈哈），比如上面的100個(gè)li，就要占用100個(gè)內(nèi)存空間，如果是1000個(gè)，10000個(gè)呢，那只能說呵呵了，如果用事件委托，那么我們就可以只對(duì)它的父級(jí)（如果只有一個(gè)父級(jí)）這一個(gè)對(duì)象進(jìn)行操作，這樣我們就需要一個(gè)內(nèi)存空間就夠了，是不是省了很多，自然性能就會(huì)更好。
例一：
如果說一個(gè)table中有10行10列，我要給里面的每一個(gè)td綁定click事件，我應(yīng)該怎么做？可以像如下這樣：
$(function(){$("td").click(function(){alert($(this).text());}) })這樣當(dāng)然沒問題，那么問題來了，如果這個(gè)table是10000行10000列，或者是動(dòng)態(tài)加載tr的呢？行列太多，容易造成瀏覽器崩潰，動(dòng)態(tài)加載的話后加載進(jìn)來的td并沒有綁定事件。
那么如上問題該如何解決呢？這就要用到事件代理了，事件代理是利用了DOM的冒泡原理及目標(biāo)元素，我來看一下代碼就明白了。
首選需要把觸發(fā)事件綁定在父元素上，就好比table，獲取目標(biāo)元素之后，可以判斷如果是td那么就可以針對(duì)此標(biāo)簽來操作：
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,獲取當(dāng)前事件源}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>這里用父級(jí)ul做事件處理，當(dāng)li被點(diǎn)擊時(shí)，由于冒泡原理，事件就會(huì)冒泡到ul上，因?yàn)閡l上有點(diǎn)擊事件，所以事件就會(huì)觸發(fā)，當(dāng)然，這里當(dāng)點(diǎn)擊ul的時(shí)候，也是會(huì)觸發(fā)的，那么問題就來了，如果我想讓事件代理的效果跟直接給節(jié)點(diǎn)的事件效果一樣怎么辦，比如說只有點(diǎn)擊li才會(huì)觸發(fā)，不怕，我們有絕招：
Event對(duì)象提供了一個(gè)屬性叫target，可以返回事件的目標(biāo)節(jié)點(diǎn)，我們成為事件源，也就是說，target就可以表示為當(dāng)前的事件操作的dom，但是不是真正操作dom，當(dāng)然，這個(gè)是有兼容性的，標(biāo)準(zhǔn)瀏覽器用ev.target，IE瀏覽器用event.srcElement，此時(shí)只是獲取了當(dāng)前節(jié)點(diǎn)的位置，并不知道是什么節(jié)點(diǎn)名稱，這里我們用nodeName來獲取具體是什么標(biāo)簽名，這個(gè)返回的是一個(gè)大寫的，我們需要轉(zhuǎn)成小寫再做比較（習(xí)慣問題）：
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="移動(dòng)" /><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('移動(dòng)');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,獲取當(dāng)前事件源}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>總結(jié)
- 上一篇： Excel 中的办公常用函数公式：EDA
- 下一篇： JS过滤表单数据中的特殊字符