JS中的事件代理

JS中的事件代理

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

目录：

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

概述：

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);
    }
}