用事件委托写table表格的删除操作

// 事件委托,多用于 动态 添加的标签
    // table表格中 所有的tbody 中的内容,都是动态,根据arr数组内容,生成的
    // 此时使用事件委托,就特别使用

    var arr = [
        {name:'张三',age:18,sex:'男',city:'北京'},
        {name:'李四',age:19,sex:'女',city:'上海'},
        {name:'王五',age:20,sex:'男',city:'广州'},
        {name:'赵六',age:21,sex:'女',city:'重庆'},
        {name:'刘七',age:22,sex:'保密',city:'天津'},
    ];

    // 获取tbody标签对象
    var oTb = document.querySelector('tbody');

    // 获取添加button按钮对象
    var oBtnAdd = document.querySelector('[name="add"]');


    // 调用生成页面函数
    setTab();

    // 新增数据操作
    oBtnAdd.onclick = function(){
        // 1,获取数据
        var oIptName = document.querySelector('[type="text"]').value;
        var oIptAge = document.querySelector('[type="number"]').value;
        var oIptCity = document.querySelector('select').value;

        var oIptSex = document.querySelectorAll('[type="radio"]');
        var oIptSexValue = 0;
        oIptSex.forEach(function(item){
            if(item.checked === true){
                oIptSexValue = item.value;
            }
        })

        // 2,创建对象
        var obj = {
            name:oIptName,
            age:oIptAge,
            sex:oIptSexValue,
            city:oIptCity,
        }

        // 3,将对象,写入数据
        arr.push(obj);

        // 4,根据新的数据,重新渲染生成新的table表格
        setTab();
    }

    // 渲染页面函数
    function setTab(){
        // 定义空字符串
        var str = '';
        // 循环遍历数组,生成页面内容字符串
        arr.forEach(function(item , key){
            // 拼接tr起始标签
            str += '<tr>';
            // 拼接序号单元格
            str += `<td>${key+1}</td>`;
            // 循环对象,拼接生成内容单元格
            for(var k in item){
                str += `<td>${item[k]}</td>`;
            }
            // 拼接删除单元格
            str += `<td><button index="${key}">删除</button></td>`;
            // 拼接tr结束标签
            str += '</tr>';
        })
        // 将生成的字符串内容,写入tbody标签
        oTb.innerHTML = str;
    }

    // 给动态生成的标签中,给button按钮,添加事件
    // 使用事件委托的形式,给button按钮的父级标签添加事件
    // 给一直存在的标签,不是动态生成父级标签,添加事件 ---> tbody


    oTb.onclick = function(e){
        // 获取事件对象,兼容
        e = e || window.event;
        // 获取事件对象触发目标,兼容
        // eTag就是我们点击的标签
        var eTag = e.target || e.srcElement; 
        
        // 判断点击的对象是button按钮 -- 标签名称就行,注意必须都大写
        if(eTag.tagName == 'BUTTON'){
            // 这里的思路和步骤,与 之前 del() 函数中定义的步骤思路完全一致
            // 只是之前的标签对象是存储在item中,现在是eTag中 

            // 获取点击的标签对象中,index属性的属性值
            var index = eTag.getAttribute('index');
            // 根据属性值,也就是索引下标,执行删除数组单元程序
            arr.splice(index , 1);
            // 根据新的数组,重新渲染页面,生成新的tbody内容
            setTab();
        }
    }

    // 事件委托的优点
    // 1,不用循环遍历,执行效率就调高了
    //      只是给父级添加事件,判断触发事件的目标
    // 2,不同考虑代码的执行顺序
    //      只要给一个一直存在的,不是动态生成的父级标签,添加事件
    //      判断触发事件的目标 即可 如果有执行,没有不执行
    //      不同考虑添加事件的时候,标签是否已经存在
    //      一般是选择层级关系最近的,一直存在的标签,添加事件
    //      例如我们demo中,使用的是 tbody  如果非要使用table 也是可以的
    //      只要判断准确,不冲突即可