zoukankan      html  css  js  c++  java
  • Javascript 笔记与总结(2-17)事件委托

    【例】五子棋,单次点击为黑色,偶次点击为白色。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>    
    View Code
  • 相关阅读:
    Ural-1018 Binary Apple Tree(树形dp+分组背包)
    Ural 1332 把圆细分+圆内切,内含关系判定
    读取图片文件(C#实现)
    使用ZXing.dll库生成二维码(C#实现)
    combobox绑定数据
    DataGridView显示日期格式问题
    夜深忽梦少年事
    Scrum角色
    Srum框架
    Scrum流程
  • 原文地址:https://www.cnblogs.com/dee0912/p/4472726.html
Copyright © 2011-2022 走看看