JS中的事件代理

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