JS中的事件代理

阅读：371 次   编辑日期：2015-03-30

目录：

• 1JS中的事件代理
• 2查看实例

概述：

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:

functiongetTagName(e) {

    e = e || window.event;

    returne.target || e.srcElement;//其他，IE,获取当前事件源

}

functiongetCell(e) {

    vartarget = getTagName(e);

    if(target.tagName.toLowerCase() =='td'){

        vartest = target.textContent || target.innerText;

        alert(test);

    }

}