成组元素的JavaScript事件处理-优快云博客

本文介绍了如何使用事件冒泡机制优化页面上多个按钮的点击事件处理，通过为父元素添加事件监听器，简化了代码并提高了执行效率。以ASP.NET页面为例，演示了如何实现这一优化过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如果一个页面上有多个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>