JS事件委托中同一个标签执行不同操作

JS事件委托中同一个标签执行不同操作，根据标签的选择器选择

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="box">
            <input type="button" class="add" value="添加" />
            <input type="button" class="remove" value="删除" />
            <input type="button" class="move" value="移动" />
            <input type="button" class="select" value="选择" />
        </div>
    </body>
    <script>
        window.onload = function(){
            var oBox = document.getElementById("box");
            oBox.onclick = function (ev) {
                var ev = ev || window.event;
                var target = ev.target || ev.srcElement;
                if(target.nodeName.toLocaleLowerCase() == 'input'){
                    switch(target.className){

                        case 'add' :
                            alert('添加');
                            
                            break;
                        case 'remove' :
                            alert('删除');
                            break;
                        case 'move' :
                            alert('移动');
                            break;
                        case 'select' :
                            alert('选择');
                            break;
                    }
                }
            }
            
        }
    </script>
    </html>
posted @ 2020-07-13 19:25  Cupid05  阅读(243)  评论(0)  编辑  收藏  举报