自定义事件记录倍数答案

【问题标题】：Custom event logging multiples自定义事件记录倍数
【发布时间】：2018-12-04 14:52:28
【问题描述】：

我编写了一个自定义 Javascript 事件来处理用户列表中是否存在用户名。当没有用户匹配时，它会很好地记录没有具有该名称的用户。但问题是当有用户匹配时，if 和 else 同时运行。代码是这样工作的：用户输入他的用户名，一旦点击密码字段，就会触发一个事件来检查用户名是否存在。我是 Javascript 新手，我只是想弄清楚自定义事件谢谢。

下面是我的代码：

var user_list = [
 {
 username:"john",
 name:"john.doe",
 last_seen:"2mins ago"
 },
 {
 username:"mary",
 name:"Mary marta",
 last_seen:"2hrs ago"
 },
 {
 username:"susan",
 name:"susy457",
 last_seen:"45mins ago"
 },
 {
 username:"moses",
 name:"moe23",
 last_seen:"45mins ago"
 },  
];
var password = document.getElementById("passwordtext");
password.addEventListener('click', checkPassword);
//Custom event to grab username field when the user is about to type the         password
var users = document.getElementById('usertext');
users.addEventListener('trigger', function(e){
   var display = e.target.value;//e.target.value
   if(display === ""){
      //console.log('empty string..');
   }else{
       for(var i = 0; i < user_list.length; i++){
           if(user_list[i].username === display){
               console.log('user found..')
           }
           else{
               console.log('user not found!');
           }
       };
   };
    event.preventDefault();
});
function checkUser(){
  var event = new CustomEvent('trigger');
  users.dispatchEvent(event);    
};
function checkPassword(e){
  checkUser()
  passcode = e.target.value;
  //console.log(e.target.value);
  event.preventDefault();
};

编辑：这是我的 html 表单代码

<form>
              <div class="form-row">
                <div class="col">
                  <input type="text" name="usertext" id ="usertext" class="form-control"placeholder="Email or username"/>
                </div>
                <div class="col">
                  <input type="password" id ="passwordtext" class="form-control" placeholder="password"/>
                </div>
                <div class="col-auto">
                  <a class="btn btn-primary" id="id-login" href="#" role="button">login</a>
                </div>
              </div>
            </form>

【问题讨论】：

请添加您的 html，同时 if/else 语句永远不会同时运行。您可能会触发您的代码两次（或更多）。这确实是有道理的，因为您的代码位于 for 循环中，该循环为user_list中的每个用户运行一次@
@MarkBaijens 我已经添加了我的 html 表单。

标签： javascript events dom-events custom-events

【解决方案1】：

在 for 循环之外进行检查。请参阅此示例。

但是，当您只搜索您的 Javascript 对象以查找用户的存在而不是循环该对象时，还有更简单的方法。

var user_list = [{
    username: "john",
    name: "john.doe",
    last_seen: "2mins ago"
  },
  {
    username: "mary",
    name: "Mary marta",
    last_seen: "2hrs ago"
  },
  {
    username: "susan",
    name: "susy457",
    last_seen: "45mins ago"
  },
  {
    username: "moses",
    name: "moe23",
    last_seen: "45mins ago"
  },
];
var password = document.getElementById("passwordtext");
password.addEventListener('click', checkPassword);
//Custom event to grab username field when the user is about to type the         password
var users = document.getElementById('usertext');
users.addEventListener('trigger', function(e) {
  var display = e.target.value; //e.target.value
  if (display === "") {
    //console.log('empty string..');
  } else {
    var userFound = false;
    for (var i = 0; i < user_list.length; i++) {
      if (user_list[i].username === display) {
        userFound = true;
        break;
      }
    };
    if (userFound) {
      console.log('user found!');
    } else {
      console.log('user not found!');
    }
  };
  event.preventDefault();
});

function checkUser() {
  var event = new CustomEvent('trigger');
  users.dispatchEvent(event);
};

function checkPassword(e) {
  checkUser()
  passcode = e.target.value;
  //console.log(e.target.value);
  event.preventDefault();
};

<form>
  <div class="form-row">
    <div class="col">
      <input type="text" name="usertext" id="usertext" class="form-control" placeholder="Email or username" />
    </div>
    <div class="col">
      <input type="password" id="passwordtext" class="form-control" placeholder="password" />
    </div>
    <div class="col-auto">
      <a class="btn btn-primary" id="id-login" href="#" role="button">login</a>
    </div>
  </div>
</form>

【讨论】：