zoukankan      html  css  js  c++  java
  • 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>
    请用今天的努力,让明天没有遗憾。
  • 相关阅读:
    Bellman-Ford算法
    POJ 1990 MooFest
    POJ3067:Japan(树状数组求逆序对)
    树状数组求逆序对
    树状数组
    Is It A Tree?(hdu1325)
    强连通图 Tarjan算法
    UVALive
    UVALive
    Problem Statement
  • 原文地址:https://www.cnblogs.com/cupid10/p/15617749.html
Copyright © 2011-2022 走看看