时间戳

首页 > 解决方案 > 有没有其他方法可以一次声明 addEventListener 并在不重新声明的情况下使用它？

javascript - 有没有其他方法可以一次声明 addEventListener 并在不重新声明的情况下使用它？

问题描述

我目前正在练习 HTML/CSS/DOM(JS)，现在更专注于 DOM。现在，我尝试克隆 Instagram 来学习 HTML/CSS/DOM。在DOM部分（js）中，当我尝试使用事件（EventListener）时，我很好奇“如果其他项目或网站需要这么多EventListener，我是否必须声明name.addEventListener（“事件名称”，函数（ “ 如果我解释得如此奇怪和混乱，我很抱歉。我试图解释我头脑风暴的想法。我会分享我的代码以防万一

这是 HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        Westagram!
    </title>
    <link rel="stylesheet" href="style/login.css" type="text/css">
    <link rel="stylesheet" href="style/common.css" type="text/css">
    <!-- <link rel="stylesheet" href="js/login.js"> -->
</head>
<body>
    <!-- 아래 모든 div들을 포함하는 제일 상위 Container -->
        <div class="wrapper">
            <div class="logo">
                <p class="westagram">Westagram</p>
            </div>
    <!-- 로그인 섹션 -->
            <div class="login-container">
                <div class="id">
                    <input type="text" id="text" placeholder="Phone number, username, or email" />
                </div>

                <div class="pw">
                    <input type="password" id="password" placeholder="Password">
                </div>

                <div class="bt">
                    <button class="login-btn">Log in
                    </button>
                </div>
            </div>
    <!-- 비밀번호 찾는 섹션 -->
            <div class="click">
                <a class="find-password">Forgot Password</a>
            </div>
        </div>

        <script src="js/login.js"></script>
</html>

这是 CSS 文件

*{
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

@font-face {
    font-family: instagramFont;
    src:  url("../src/westagram.ttf") format("opentype");
}

.wrapper {
  margin: 250px 250px 0px 250px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  border: solid 1px #D3D3D3;
  width: 500px;
  height: 500px;

}
.wrapper .login-container {
  width: 400px;
  height: 500px;
}
.wrapper .login-container .id{
  margin-top: 70px;
}

#text {
  width: 100%;
  height: 45px;
  border: solid 1px #D3D3D3;
  border-radius: 5px;
  padding-left: 15px;
}

#password {
  width: 100%;
  height: 45px;
  border: solid 1px #D3D3D3;
  border-radius: 5px;
  padding-left: 15px;
}

.wrapper .login-container .bt .login-btn{
  width: 100%;
  height: 45px;
  border: solid 1px #D3D3D3;
  border-radius: 5px;
  /*background-color: #ff000;*/
  background-color: #B2DFFC;
  cursor: pointer;
  /*padding-left: 15px;*/
}
.wrapper .login-container .pw {
  margin-top: 10px;
  margin-bottom: 10px;
}

.wrapper .login-container.bt {

}


.westagram {
  font-size : 60%;
  font-family: instagramFont;
  font-size: 5rem;
}

这是JS代码

let id = document.querySelector("#text");
let password = document.querySelector("#password");
let loginButton = document.querySelector(".login-btn")

function active() {
    if(id.value.length > 0 && password.value.length > 0){
        loginButton.style.backgroundColor='#0095F6';
    } else {
        loginButton.style.backgroundColor='#B2DFFC'
    }
}

id.addEventListener("keyup", active)
password.addEventListener("keyup", active)

非常感谢您提前提供的帮助！

标签： javascriptdom

解决方案

您可以添加一个事件侦听器吗？是的。它是事件委托。您使用目标并检查它是否是元素。检查元素是否相同的多种方法。您可以使用 is()，您可以检查类/id/属性，或者您可以查看元素是否与引用匹配

document.body.addEventListener("input", function (evt) {
   const target = evt.target;
   if (target.closest('#inp1, #inp2')) {
      console.log(target.value);
   }
});
<input type="text" id="inp1" class="loginInput" />
<input type="text" id="inp2" class="loginInput" />

document.body.addEventListener("input", function (evt) {
   const target = evt.target;
   if (target.classList.contains("loginInput")) {
      console.log(target.value);
   }
});
<input type="text" id="inp1" class="loginInput" />
<input type="text" id="inp2" class="loginInput" />

var inp1 = document.querySelector("#inp1");
var inp2 = document.querySelector("#inp2");

document.body.addEventListener("input", function(evt) {
  const target = evt.target;
  if (target === inp1 || target === inp2) {
    console.log(target.value);
  }
});
<input type="text" id="inp1" class="loginInput" />
<input type="text" id="inp2" class="loginInput" />

在输入位于同一个容器中时，您甚至可能不关心它是什么输入。只需将事件侦听器绑定到父级。它里面的任何动作都会被拾取。

document.querySelector('#login').addEventListener("input", function(evt) {
  const target = evt.target;
  console.log(target.value);
});
<form id="login">
  <input type="text" id="inp1" class="loginInput" />
  <input type="text" id="inp2" class="loginInput" />
</form>

推荐阅读