最近更新
阅读排行
关注本站
JS中的事件代理
阅读：4223 次 编辑日期：2015-03-30
目录：
概述：
Dear all，有一件事我需要坦白一下，今天我才知道“事件代理”是怎么一回事儿，作为活在当下的好童鞋，今天我就说说JS中的“事件代理”。
如果说一个table中有10行10列，我要给里面的每一个td绑定click事件，我应该怎么做？可以像如下这样：
$(function(){
$("td").click(function(){
alert($(this).text());
})
})
OK，这样当然没问题，那么问题来了，如果这个table是10000行10000列，或者是动态加载tr的呢？行列太多，容易造成浏览器崩溃，动态加载的话后加载进来的td并没有绑定事件。
JS中的事件代理
那么如上问题该如何解决呢？这就要用到事件代理了，事件代理是利用了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);
}
}
以上就是事件代理的大致意思，点击下面的实例操作一下吧~
