成组元素的JavaScript事件处理

如果一个页面上有多个button需要添加事件处理，而对这些元素的处理方式有都是类似的，比如有10个button，我们可以为每个button都写一个事件处理函数，不过费时费力。

比如：

<input id="Button1" type="button" value="button1" onclick="handler1()" /><br />
<input id="Button2" type="button" value="button2" onclick="handler2()" /><br />

一个较好的办法是对他们的父对象间进行事件处理，JavaScript的事件会通过冒泡机制传导到其父对象，并能通过srcElement获取事件的起始元素。 可以在button上面加个div元素并给这个div添加onclick事件处理，这样代码简洁，执行也更高效。

<script type="text/javascript">
    window.onload = function () {

        var isFirxFox = function () {
            return navigator.userAgent.indexOf("Firefox") > 0 ? true : false;
        }

        var clickHandler = function (index) {
            //handle click event here
            alert(index);
        }

        var btnGroup = document.getElementById("btnGroup");

        btnGroup.addEventListener("click", function (event) {

            var targetId;
            if (isFirxFox()) {
                //for Firefox
                targetId = event.target.id;
            }
            else {
                //For IE, Chrome
                targetId = event.srcElement.id;
            }

            var index = targetId.slice(6);
            clickHandler(index);

//            switch (targetId) {
//                case "Button1": alert("btn1 clicked"); break;
//                case "Button2": alert("btn2 clicked"); break;
//                case "Button3": alert("btn3 clicked"); break;
//                case "Button4": alert("btn4 clicked"); break;
//                case "Button5": alert("btn5 clicked"); break;
//                default:
//                    alert("other btns are clicked");

//            }

        });
    }
</script>
    <h2>
        Welcome to ASP.NET!
    </h2>
    <div id="btnGroup">
        <input id="Button1" type="button" value="button1" /><br />
        <input id="Button2" type="button" value="button2" /><br />
        <input id="Button3" type="button" value="button3" /><br />
        <input id="Button4" type="button" value="button4" /><br />
        <input id="Button5" type="button" value="button5" /><br />
        <input id="Button6" type="button" value="button6" /><br />
        <input id="Button7" type="button" value="button7" /><br />
        <input id="Button8" type="button" value="button8" /></div>