成組元素的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>