我添加的事件处理程序仅在页面加载时工作一次

Question

我正在尝试检查用户是否在字段仍然为空时更改了字段。并且我在用户名字段上添加了事件侦听器，因此当用户从一个字段移动到另一个字段时，他会得到一个检查标志或一个错误。
我的 HTML 文件：

<!DOCTYPE html>
<html>
    <head>
        <title>Registeration form</title>
        <link type="text/css" rel="stylesheet" href="css/fontawesome.css"/> 
    </head>
    <body>
        <form method="post">
            <fieldset>
                <input type="text" name="user_name" id="user_name" style="display:inline;float:left;" placeholder="User Name">
                <li id="name_status" style="list-style-type:none;"></li>
            </fieldset>
            <fieldset>
                <input type="text" name="email" id="email"  style="display:inline;float:left;" placeholder="Email Address">
                <li id="email_status" style="list-style-type:none;"></li>
            </fieldset>
            <fieldset>
                <input type="button" name="submit" id="submit" value="submit">
            </fieldset>
        </form>
    <script type="text/javascript" src="js/test.js"></script>
    </body>
</html>

我的 Javascript 文件：

var user_name=document.getElementById("user_name");
var user_name_status=document.getElementById("name_status");

user_name.addEventListener("blur",check_empty(user_name.value,user_name_status),false);
function check_empty(value,status){
    if(value.length===0){
        status.innerHTML="<sup>*</sup>This feild cannot be empty";
    } else {
        status.innerHTML="<i class='icon-check'></i>";
    }
}

Answer 1

我认为对您来说最好的选择是在匿名函数中传递带有参数的函数，如下面的代码所示。

var user_name = document.getElementById("user_name");
var user_name_status = document.getElementById("name_status");  

user_name.addEventListener("blur",function(){check_empty(user_name.value,user_name_status);},false);
function check_empty(name,status) {
  if (name.length === 0) {
    status.innerHTML = "<sup>*</sup>This feild cannot be empty";
  } else {
    status.innerHTML = "<i class='icon-check'>check</i>";
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Registeration form</title>
</head>

<body>
  <form method="post">
    <fieldset>
      <input type="text" name="user_name" id="user_name" style="display:inline;float:left;" placeholder="User Name">
      <li id="name_status" style="list-style-type:none;"></li>
    </fieldset>
    <fieldset>
      <input type="text" name="email" id="email" style="display:inline;float:left;" placeholder="Email Address">
      <li id="email_status" style="list-style-type:none;"></li>
    </fieldset>
    <fieldset>
      <input type="button" name="submit" id="submit" value="submit">
    </fieldset>
  </form>
</body>

</html>

Answer 2

您立即致电check_empty。您可以将函数引用check_empty 传递给.addEventListener()。在事件处理程序中，this 引用 user_name。不要传递变量status，而是在事件处理程序中使用定义的变量user_name_status。

var user_name = document.getElementById("user_name");
var user_name_status = document.getElementById("name_status");

user_name.addEventListener("blur", check_empty, false);

function check_empty(e) {
  if (this.value.length === 0) {
    user_name_status.innerHTML = "<sup>*</sup>This feild cannot be empty";
  } else {
    user_name_status.innerHTML = "<i class='icon-check'>check</i>";
  }
}

<!DOCTYPE html>
<html>

<head>
  <title>Registeration form</title>
</head>

<body>
  <form method="post">
    <fieldset>
      <input type="text" name="user_name" id="user_name" style="display:inline;float:left;" placeholder="User Name">
      <li id="name_status" style="list-style-type:none;"></li>
    </fieldset>
    <fieldset>
      <input type="text" name="email" id="email" style="display:inline;float:left;" placeholder="Email Address">
      <li id="email_status" style="list-style-type:none;"></li>
    </fieldset>
    <fieldset>
      <input type="button" name="submit" id="submit" value="submit">
    </fieldset>
  </form>
</body>

</html>