不用jQuery怎么给一类元素添加点击事件

Question

如果不用jQuery也不同for循环，怎么批量的给 class="checkbox"的元素增加点击事件呢？

<tr>
        <th><input type="checkbox" class="checkbox"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td><input type="checkbox" class="checkbox"></td>
        <td>1</td>
        <td>张三</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="del_tr(this)">删除</a> </td>
    </tr>
    <tr>
        <td><input type="checkbox" class="checkbox"></td>
        <td>2</td>
        <td>李四</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="del_tr(this)">删除</a> </td>
    </tr>
    <tr>
        <td><input type="checkbox" class="checkbox"></td>
        <td>3</td>
        <td>王五</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="del_tr(this)">删除</a> </td>
    </tr>

Answer 1

挂载到父元素上即可
示例如下

document.querySelector('table').addEventListener('click', function (e) {
            if(e.target.classList.contains('checkbox')) {
                console.log(e.target);
            }
        })