JavaScript EventHandlers 在 load 上调用

JavaScript EventHandlers calling on load

本文关键字：调用 load EventHandlers JavaScript      更新时间：2023-09-26

我没有太多的JavaScript经验，尽管我用其他语言编程并且大致了解所有函数和事件侦听器的作用以及不做什么。

然而，我已经玩了几个小时的作业，不确定什么，我试图使用谷歌来寻找答案，但没有运气。

所以我正在尝试使它在事件发生时调用函数（例如"模糊"和"单击"），但是似乎因为所有监听器都加载在"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" >
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <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);
你可以在jsFiddle

上看到你的代码，jsFiddle是一个很好的工具，用于测试和原型化Javascript和HTML！

还要注意你的代码中的一点，这是不好的做法：

setTimeout("formClock()",1000) ;

将字符串传递给 setTimeout 从来都不是一个好主意。您可以传递一个函数对象：

setTimeout(formClock, 1000);

这是因为您正在调用函数

validateForm(FoodOrder)

立即将结果分配给事件

如果上面的函数返回另一个函数会很好，但事实并非如此

因此，只需将其包装在另一个函数中，如下所示：

submit.addEventListener("click", function() { validateForm(FoodOrder) }, false);

您还应该load事件替换为DOMContentLoaded以更早地附加您的事件

但最好使用jQuery：

$(function() {
    $('#clock').mouseover(formClock);
    $('#submit').click(function() { validateForm(FoodOrder) });
    $('#room').blur(function() { checkRoom(FoodOrder.room) });
}
相关文章：