Fatal编程技术网
  • javascript/
  • JavaScript事件处理程序在加载时调用

JavaScript事件处理程序在加载时调用

javascript html css

JavaScript事件处理程序在加载时调用,javascript,html,css,event-listener,Javascript,Html,Css,Event Listener,我对JavaScript没有太多的经验，尽管我已经用其他语言编程过，并且大致了解所有函数和事件侦听器的功能等等 然而，我已经在一个作业上玩了几个小时，并且不确定，我试着用谷歌找到答案，但没有运气 因此，我试图使函数在事件发生时被调用（例如“blur”和“click”），然而，这似乎是因为所有侦听器都加载在“addListeners（）”函数中。所有事件侦听器仅在加载/重新加载页面时触发，然后发送警报 代码如下所示： <!DOCTYPE HTML> <html> &l

我对JavaScript没有太多的经验，尽管我已经用其他语言编程过，并且大致了解所有函数和事件侦听器的功能等等

然而，我已经在一个作业上玩了几个小时，并且不确定，我试着用谷歌找到答案，但没有运气

因此，我试图使函数在事件发生时被调用（例如“blur”和“click”），然而，这似乎是因为所有侦听器都加载在“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.addEventListener("click", function() { validateForm(FoodOrder) }, false);


食物订购表格
函数validateForm（表单）{
如果（isNotEmpty（form.room））{
if（checkName（form.name））{
if（有效期（表格室））{
返回true；
}
}
}
返回false；
}
函数isNotEmpty（elem）{
var str=元素值；
如果（str==null | | str.length==0）{
警告（“请填写必填字段”）；
返回false；
}
否则{
返回true；
}
}
函数checkName（名称）{
如果（theName.value==“”）{
警报（“必须输入名称”）；
返回false；
};
如果（！validName（name.value））{
警告（“名称应按字母顺序排列”）；
返回false；
};
返回true；
}
函数有效名称（theName）{
var valid=true；
对于（var i=0；i“Z”））&&
((thisChar"a)| |(thisChar"z)){
返回！有效；
}; 
};
theName.charAt（0.toUpperCase（）；
返回有效；
}
功能validRoom（休息室）{
var valid=true；
如果（room.value==“”）{
警报（“必须输入房间号”）；
返回！有效；
};
roomNumber=parseInt（房间值）；
如果（isNaN（房间号））{
警报（“需要一个号码”）；
返回！有效；
};
如果（（房间号<100）| |（房间号>399））{
警报（“房间号必须介于100和399之间”）；
返回！有效；
};
返回有效；
}
函数formClock（）{
变量时间=新日期（）
var hour=time.getHours（）
var minutes=time.getMinutes（）
var second=time.getSeconds（）
var temp=“”+（（小时>12）？小时-12：小时）
温度+=（（分钟<10）？“：0”：“+”分钟
温度+=（（秒<10）？“：0”：“+”秒
温度+=（小时>=12）？“下午：”上午。“
document.FoodOrder.Time.value=temp；
setTimeout（“formClock（）”，1000）；
}
功能检查室（休息室）{
如果（room.value==“”）{
警报（“必须输入房间号”）；}
roomNumber=parseInt（房间值）；
如果（isNaN（房间号））{
警报（“需要一个号码”）；}
如果（（房间号<100）| |（房间号>399））{
警报（“房间号必须介于100和399之间”）；
} 
}
函数addListeners（）{
时钟=document.getElementById（“时钟”）；
clock.addEventListener（“鼠标悬停”，formClock，false）；
提交=document.getElementById（“提交”）；
submit.addEventListener（“单击”，validateForm（FoodOrder），false）；
房间=document.getElementById（“房间”）；
房间。添加的文件列表（“模糊”，检查室（FoodOrder.room），假）；
}
addEventListener（“加载”，addListeners，false）；
Froggle食品配送服务
订单

名字

急诊室

食物菜单：

辣椒4.50美元

比萨饼2.5美元

楔子4.50美元

百吉饼$3.00


饮料菜单：

调味$1.00

矿泉水1.50美元

啤酒4.50美元
任何和所有的帮助都将受到感谢

问题在于这些代码行：

  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);
您可以看到您的代码正在运行，这是测试和原型化Javascript和HTML的好工具

请注意，您的代码中有一点是错误的做法：

setTimeout("formClock()",1000) ;
。您可以传递函数对象：

setTimeout(formClock, 1000);
这是因为您正在调用您的函数

validateForm（FoodOrder）

立即将其结果分配给事件

如果上面的函数返回另一个函数就可以了，但事实并非如此

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

  <!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.addEventListener("click", function() { validateForm(FoodOrder) }, false);
您还应该将
load
事件替换为
DOMContentLoaded
，以便更早地附加事件

但是最好使用
jQuery
：

$(function() {
    $('#clock').mouseover(formClock);
    $('#submit').click(function() { validateForm(FoodOrder) });
    $('#room').blur(function() { checkRoom(FoodOrder.room) });
}
我不明白问题出在哪里？您是否已使用
console.log（）检查过触发事件的时间？这可能是在DOM加载完成之前发生的，可能会导致控制台中出现错误。只有在加载页面时才会显示提示，提示某人输入了错误的内容。仅当单击“提交”按钮时，或当用户导航到房间字段之外时，在房间号的情况下，才应显示它们。