JS之事件委托实例

来源：互联网发布：zk 集群通讯端口编辑：程序博客网时间：2024/06/05 16:44

通过JS的事件委托来实现五子棋实例的基本结构。该实例是模仿燕十八老师的实例做的。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>事件委托(事件委托给上一级，通过target来辨别委托给哪个事件)</title><style>table{width: 400px;height: 400px;border: 0;border-collapse: collapse;background: green;}td{border: 1px solid gray;}</style></head><body><h1>事件委托(事件委托给上一级，通过target来辨别委托给哪个事件)</h1><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(ev){ev.target.style.background = num++ % 2?'black':'white';}// var tds = document.getElementsByTagName('td');// var i = 0;// while(i < tds.length){// tds[i].onclick = function(){// this.style.background = 'black';// }// i++;// }</script></html>

0 0