事件委托,target实现下象棋

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
<style>
table{
width: 400px;
height: 400px;
border: 0;
border-collapse: collapse;
background: gray;
}
td{
border: 1px solid black;
}
</style>
</head>
    <body>
     <p>事件委托target</p>
     <div>
     <table>
     <tr>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     </tr>
     <tr>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     </tr>
     <tr>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     </tr>
     <tr>
     <td></td>
     <td></td>
     <td></td>
     <td></td>
     </tr>
     </table>
     </div>
     
    </body>
    <script>
    var i=0;
    document.getElementsByTagName('table')[0].onclick=function (ev) {
    ev.target.style.background=i%2==0?"black":"red";
    i++;
    // body...
    }
    </script>
</html>


你可能感兴趣的:(事件委托,target实现下象棋)