//第一种方法所有input通吃性 function inevent() { var container = document.getElementById("container"); var inputs = container.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; input.onfocus = textfocus; } } function textfocus() { var container = document.getElementById("container"); var inputs = container.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; if (input == this) {//所有input通吃性,无论文本框还是按钮 this.style.background = "yellow"; } else { input.style.background = "white"; } } } //第一种方法结束 //第二种方法开始所有input通吃性 function inevent1() { var container = document.getElementById("container"); var inputs = container.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; input.onfocus = inputfocus; input.onblur = inputblur; } } function inputfocus() { this.style.background = "yellow"; } function inputblur() { this.style.background = "white"; } //第二种方法结束 //第三种方法开始所有input通吃性 function inevent2() { var container = document.getElementById("container"); var inputs = container.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; input.onfocus = function () { this.style.background = "yellow"; }//匿名函数响应事件 input.onblur = function () { this.style.background = "white"; } } } //第三种方法结束 //第四种方法仅对type="text"的input执行变化 function inevent3() { var container = document.getElementById("container"); var inputs = container.getElementsByTagName("input"); for (var i = 0; i < inputs.length; i++) { var input = inputs[i]; if (input.type == "text") {//当input的type为Text里才响应两个事件,其它的不响应 input.onfocus = inputfocus;//应用第二种方法的两个事件 input.onblur = inputblur; } } } 网页内容: <body οnlοad="inevent3()"> <div id="container"> <input type="text" /><input type="text" /><input type="text" /><input type="text" /><input type="button" value="点击" /> </div> </body>