成组元素的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>
![](https://img2024.cnblogs.com/blog/35695/202408/35695-20240826070647288-243310440.jpg)