虽然我用其他语言编写过程序并且大致了解所有函数和事件监听器的作用以及诸如此类的东西，但我对 JavaScript 没有太多经验。
然而，我已经为一项作业做了几个小时，并且不确定某些事情，我曾尝试使用谷歌来寻找答案，但没有成功。
所以我试图做到这一点，以便在事件发生时调用函数(例如“blur”和“click”)，但似乎因为所有的 Listeners 都加载到“addListeners()”函数中。所有事件监听器仅在页面加载/重新加载时触发，然后它们会发送警报。
代码如下所示:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="order-form.css">
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title>Food order form</title>
<script type="text/Javascript">
function validateForm (form) {
if (isNotEmpty(form.room)){
if (checkName(form.name)){
if (validRoom(form.room)) {
return true;
}
}
}
return false;
}
function isNotEmpty(elem){
var str = elem.value;
if (str == null || str.length == 0){
alert("Please fill in the required fields.");
return false;
}
else {
return true;
}
}
function checkName(theName) {
if (theName.value == "") {
alert ("Name must be entered");
return false;
};
if (!validName(theName.value)){
alert("Name should be alphabetic");
return false;
};
return true;
}
function validName(theName) {
var valid = true;
for (var i = 0; i < theName.length; i++) {
thisChar = theName.charAt(i);
if ( ((thisChar < "A") || (thisChar > "Z")) &&
((thisChar < "a") || (thisChar > "z"))){
return !valid;
};
};
theName.charAt(0).toUpperCase();
return valid;
}
function validRoom(theRoom) {
var valid = true;
if (theRoom.value == "") {
alert ("Room number must be entered");
return !valid;
};
roomNumber = parseInt(theRoom.value);
if (isNaN(roomNumber)){
alert("A number is required");
return !valid;
};
if ((roomNumber < 100) || (roomNumber > 399)){
alert("Room number must be between 100 and 399");
return !valid;
};
return valid;
}
function formClock() {
var time = new Date()
var hour = time.getHours()
var minute = time.getMinutes()
var second = time.getSeconds()
var temp = "" + ((hour > 12) ? hour - 12 : hour)
temp += ((minute < 10) ? ":0" : ":") + minute
temp += ((second < 10) ? ":0" : ":") + second
temp += (hour >= 12) ? " P.M." : " A.M."
document.FoodOrder.Time.value = temp ;
setTimeout("formClock()",1000) ;
}
function checkRoom(theRoom) {
if (theRoom.value ==""){
alert("Room number must be entered");}
roomNumber = parseInt(theRoom.value);
if (isNaN(roomNumber)){
alert("A number is required");}
if ((roomNumber < 100) || (roomNumber > 399)){
alert("Room number must be between 100 and 399");
}
}
function addListeners(){
clock = document.getElementById("clock");
clock.addEventListener("mouseover", formClock, false);
submit = document.getElementById("submit");
submit.addEventListener("click", validateForm(FoodOrder), false);
room = document.getElementById("room");
room.addEventListener("blur", checkRoom(FoodOrder.room), false);
}
window.addEventListener("load", addListeners, false);
</script>
</head>
<body>
<h2>Froggle's Food Delivery Service<br>Order Form</h2>
<div class="form"><form NAME="FoodOrder"
ACTION="#"
METHOD="POST">
<p><input TYPE = "text" NAME = "Time" id="clock" SIZE = 20>
<p>Name <input TYPE = "text" NAME = "name" SIZE = 20>
<br>IST Room <input TYPE = "text" NAME = "room" id="room" SIZE =3>
<br>Food Menu:
<br> <input TYPE="radio" NAME="food" value="Chilli-4.50">Chilli $4.50
<br><input TYPE="radio" NAME="food" value="Pizza-2.50"> Pizza $2.50
<br><input TYPE="radio" NAME="food" value="Wedges-4.50"> Wedges $4.50
<br><input TYPE="radio" NAME="food" value="Bagel-3.00"> Bagel $3.00
<br><br>Drink Menu:
<br><input TYPE="radio" NAME="drink" value="Flavoured Milk-1.00"> Flavoured $1.00
<br><input TYPE="radio" NAME="drink" value="Mineral Water-1.50"> Mineral Water $1.50
<br><input TYPE="radio" NAME="drink" value="Ale-4.50"> Ale $4.50
<br>
<br> <input TYPE=SUBMIT VALUE="Order" id="submit" >
<input TYPE=RESET VALUE="Cancel"><br>
</form></div>
</body>
</html>
在此先感谢任何和所有帮助。
最佳答案
问题在于这些代码行:
submit = document.getElementById("submit");
submit.addEventListener("click", validateForm(FoodOrder), false);
room = document.getElementById("room");
room.addEventListener("blur", checkRoom(FoodOrder.room), false);
validateForm(FoodOrder) 和 checkRoom(FoodOrder.room) 立即 执行这些函数。每当函数名称后跟 () 时，您就是在向 Javascript 发送命令以立即执行该函数。然后将该函数的结果指定为事件监听器。显然，这会在页面加载时计算 validateForm 和 checkForm 的结果，随后不会做任何有用的事情。
当然，您要做的是仅在触发事件时才执行这些代码片段。为此，您需要将实际函数传递给 addEventListener，就像您在以下代码行中所做的那样:
clock.addEventListener("mouseover", formClock, false);
但是您需要将参数传递给函数，这不能仅通过传递名称来完成。那么该怎么办？好吧，您实际上需要创建另一个函数，该函数在触发事件时运行，然后使用适当的参数调用您想要的函数:
submit = document.getElementById("submit");
submit.addEventListener("click", function() {
validateForm(FoodOrder);
}, false);
room = document.getElementById("room");
room.addEventListener("blur", function() {
checkRoom(FoodOrder.room);
}, false);
您可以看到您的代码正在运行 on jsFiddle ，用于测试和制作 Javascript 和 HTML 原型(prototype)的好工具!
另请注意您的代码中有一点是不好的做法:
setTimeout("formClock()",1000) ;
It is never a good idea to pass a string to setTimeout .您可以传递一个函数对象:
setTimeout(formClock, 1000);
关于加载时调用的 JavaScript EventHandlers，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19806647/