JS中的事件代理
目录:
概述:
Dear all,有一件事我需要坦白一下,今天我才知道“事件代理”是怎么一回事儿,作为活在当下的好童鞋,今天我就说说JS中的“事件代理”。
如果说一个table中有10行10列,我要给里面的每一个td绑定click事件,我应该怎么做?可以像如下这样:
1
2
3
4
5
|
$(
function
(){
$(
"td"
).click(
function
(){
alert($(
this
).text());
})
})
|
OK,这样当然没问题,那么问题来了,如果这个table是10000行10000列,或者是动态加载tr的呢?行列太多,容易造成浏览器崩溃,动态加载的话后加载进来的td并没有绑定事件。
JS中的事件代理
那么如上问题该如何解决呢?这就要用到事件代理了,事件代理是利用了DOM的冒泡原理及目标元素,我来看一下代码就明白了。
首选需要把触发事件绑定在父元素上,就好比table,获取目标元素之后,可以判断如果是td那么就可以针对此标签来操作:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
//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);
}
}
|