事件委托

如下为一个事件委托的典型案例，就是给每个input绑定不同的事件。
其基本步骤为

1. 为div绑定事件
2. 获取下层元素节点
3. 判断节点的某一个属性以区分不同节点来安排不同的事件

<div id="box">
        <input type="button" id="add" value="添加" />
        <input type="button" id="remove" value="删除" />
        <input type="button" id="move" value="移动" />
        <input type="button" id="select" value="选择" />
</div>
<script>
window.onload = function(){
            var oBox = document.getElementById("box");
            oBox.onclick = function (ev) {
                //为上层元素绑定事件
                
                var target = ev.target;
                //获取可以激活事件的所有元素，包括所有的input以及其上层div
                if(target.nodeName.toLocaleLowerCase()  == 'input'){
                    //这个转换小写是必不可少的
                    switch(target.id){
                        //switch的参数是一个变量，这个变量之后会与各种case的值比较。
                        case 'add' :
                            
                            alert('添加');
                            break;
                        case 'remove' :
                            alert('删除');
                            break;
                        case 'move' :
                            alert('移动');
                            break;
                        case 'select' :
                            alert('选择');
                            break;
                    }
                }
            }
            
        }

</script>

注意

1. case后面是冒号
2. 获得target之后必须转换为小写
3. 注意到事件冒泡是在哪一步发挥作用的。

ps

事实上，上述代码有一行是多余的

<div id="box">
        <input type="button" id="add" value="添加" />
        <input type="button" id="remove" value="删除" />
        <input type="button" id="move" value="移动" />
        <input type="button" id="select" value="选择" />
</div>
<script>
window.onload = function(){
            var oBox = document.getElementById("box");
            oBox.onclick = function (ev) {
                //为上层元素绑定事件
                
                var target = ev.target;
                switch(target.id){
                    case 'add' :
                    
                            
                    alert('添加');
                    break;
                   
                }
            }
            
        }

</script>

参考

JavaScript Switch 语句