¿Hay alguna otra forma de declarar addEventListener una vez y usarlo sin volver a declararlo?

0

Actualmente practico HTML / CSS / DOM (JS) y me enfoco más en DOM en este momento. Por ahora, intento clonar el Instagram para estudiar HTML / CSS / DOM. En la parte DOM (js), cuando intento usar event (EventListener), tengo curiosidad de que "si el otro proyecto o sitio web necesita tantos EventListener, ¿tengo que declarar name.addEventListener (" nombre de evento ", función ( )) cada vez? ¿Puedo declarar el EventListener en el cuerpo o contenedor (div-class) y usando event.target, por lo que no necesito ser declarado EventListener varias veces? " Lo siento si lo explico de manera tan rara y desordenada. Traté de explicar mi pensamiento tormentoso. Compartiré mi código por si acaso

Esto es 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>

Este es un archivo 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;
}

Este es el código 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)

¡Realmente agradezco su ayuda por adelantado!

12
  • No está claro por qué tendría que seguir declarándolo. ¿El elemento se está quitando y volviendo a agregar? 13 oct a las 15:45
  • 3
    Sí, se puede, se llama delegación de eventos .
    Teemu
    13 oct a las 15:46
  • @epascarello ¡Lamento haberlo editado! Añado esta parte "Si el otro proyecto o sitio web necesita tantos EventListener"
    DOeat
    13 oct a las 15:47
  • Puede agregar un detector de eventos y hacer que haga varias cosas según el objetivo. Pero puede que esa no sea la mejor solución. No hay que escribirlo una vez y toda la sesión del usuario lo conserva. Cuando navegue por la página, deberá volver a enlazar los detectores de eventos. 13 oct a las 15:48
  • Mientras el receptor de eventos (es decir, la cosa a la que llamas .addEventListener) permanezca vivo, no le agregas la misma (event name, handling function)combinación una segunda / tercera vez / etc. Para los elementos DOM, eso significa que mientras no los elimine del DOM, solo necesita un enlace de escucha por (event name, handling function)par. (el mismo evento, diferentes controladores o diferentes eventos, el mismo controlador, son una historia diferente). Para mayor claridad, querrá encontrar un tutorial de JS moderno sobre el trabajo con eventos DOM. 13 de oct a las 15:49
0

¿Puede agregar un detector de eventos? Si. Es delegación de eventos. Usas el objetivo y haces verificaciones para ver si es el elemento. Varias formas de comprobar si el elemento es el mismo. Puede usar is (), puede verificar una clase / id / atributo o puede ver si los elementos coinciden con una referencia

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" />

Si las entradas están en el mismo contenedor, es posible que ni siquiera le importe qué entrada es. Simplemente vincule el detector de eventos al padre. Cualquier acción dentro de él será recogida.

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>
-1

Puede escribir una función para evitar que se repitan exactamente los mismos oyentes de eventos:

function eventHandler(event, func, target ){
    return target.addEventListener(event, func);
}

eventHandler("keyup", active, id);
2
  • No estoy seguro de cómo eso mejora algo, aún escribiendo el mismo código. 13 de oct a las 16:00
  • ¿No es útil mientras se itera a través de una matriz de elementos que deben manipularse exactamente de la misma manera? 13 de oct a las 16:09