【例】五子棋，单次点击为黑色，偶次点击为白色。e.target 的用法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> table{ width:400px; height:400px; border:0; border-collapse: collapse; background:orange; } td{ border: 1px solid gray; cursor:pointer; } </style> </head> <body> <table> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </body> <script> var num = 0; //计数器 document.getElementsByTagName("table")[0].onclick = function(e){ //alert(e.target); //[object HTMLTableCellElement] //console.log(e.target); //<td></td> e.target.style.background = num++%2?"white":"black"; //单数为黑色，偶数为白色 } </script> </html>
把 td 的点击事件交给 table ，即把事件处理委托给 table，事件委托。
【附：技巧】sublime （text2 | text3）快速写表格
table>tr*5>td*5
生成 5 行 5 列的表格
<table> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table>