事件委托语法

        <div>
            <span id="span">我是span标签</span>
            <p class="p">我是p标签</p>
            <h1 name="h1">我是h1标签</h1>
            <a href="JavaScript:;">我是a标签</a>
        </div>

随便写

        // 给父级 div 添加事件
        var oDiv = document.querySelector('div');
        oDiv.onclick = function(e){
            // 兼容事件对象
            e = e || window.event;

            // 判断 事件对象 是哪个标签,执行不同的操作
            // 可以通过标签名称,id,class,属性等等,都可以进行判断
            // 根据id属性值判断
            if( e.target.id === 'span' ){
                console.log( '我是点击span标签,触发的程序' )
            }

            // 根据class属性值判断
            if( e.target.className === 'p' ){
                console.log( '我是点击p标签,触发的程序' )
            }
            // 获取 name 属性的属性值 判断
            if( e.target.getAttribute('name') === 'h1' ){
                console.log( '我是点击h1标签,触发的程序' )
            }

            // 获取 href 属性的属性值 判断
            if( e.target.getAttribute('href') === 'JavaScript:;' ){
                console.log( '我是点击a标签,触发的程序' )
            }
        }

        <table>
            <thead>
                <tr>
                    <td>序号</td>
                    <td>姓名</td>
                    <td>年龄</td>
                    <td>身高</td>
                    <td>体重</td>
                    <td>删除</td>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>

        table{
            border-collapse: collapse;
        }
        td{
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            font-size: 20px;
            border:1px solid #000;
        }

        var arr = [
            {id:1, name:'张老师',age:18,height:180,width:50},
            {id:20, name:'霞姐',age:16,height:179,width:49},
            {id:31, name:'马老师',age:17,height:180,width:50},
            {id:78, name:'刘班长',age:32,height:150,width:85},
            {id:109, name:'常同学',age:31.9,height:149,width:84},
        ];
        // 1,根据数组的数据,动态生成table表格
        var oTbody = document.querySelector('tbody');
        oTbody.innerHTML = setTable(arr);
        // 2,通过事件委托的方式,给父级标签添加事件
        // 通过判断触发事件的标签,执行不同的操作
        // 一般的父级,找,一直存在的,不是动态生成的父级
        oTbody.onclick = function(e){
            // 兼容事件对象
            e = e || window.event;
            // 只有点击button时,我们才会执行删除程序
            if(e.target.tagName === "BUTTON" ){
                // 可以添加一个 确认框,确认在后,再执行删除程序
                var bool = window.confirm('您确认要删除这条可爱的数据吗?');
                // 如果bool是 false , 取反,结果是 true 执行 return
                // 终止不会执行之后的程序
                if( !bool ) return;
                // 可以通过 getAttribute() 获取标签对象属性的方法
                var index = e.target.getAttribute('index');
                // 从获取的索引开始,删除1个数组中的单元
                arr.splice( index , 1 );
                // 需要根究新的数组,重新渲染生成页面
                // 此时的arr,是删除了数据之后的arr
                oTbody.innerHTML = setTable(arr);

            }
        }
        // 生成table表格,封装成一个函数的形成
        // 你给我一个arr数据数组,我返回给你一个table表格的字符串
        function setTable(array){
            // 定义一个空字符串,存储数据
            var str = '';
            // 循环遍历数组,生成对应的的字符串
            // v就是数据,就是每一个对象
            // k就是索引,0,1,2,3,4
            array.forEach(function(v,k){
                // 每一次,一个对象,对应就是一个 tr 行 以及其中的td单元
                str += `
                    <tr>
                        <td>${v.id}</td>
                        <td>${v.name}</td>
                        <td>${v.age}</td>
                        <td>${v.height}</td>
                        <td>${v.width}</td>
                        <td> <button index="${k}">删除</button> </td>
                    </tr>
                `;
            });
            // 循环结束,数组中的没一个对象,就对应生成一行tr和td
            // 都拼接在str 中,返回值 是 str
            return str;
        }