我目前正在練習 HTML/CSS/DOM(JS)，現在更專注于 DOM。現在，我嘗試克隆 instagram 來研究 HTML/CSS/DOM。在DOM部分（js），當我嘗試使用事件（EventListener）時，我很好奇“如果其他專案或網站需要這么多EventListener，我是否必須宣告name.addEventListener（“事件名稱”，函式（ )) 每次？我可以在正文或包裝器（div 類）中宣告 EventListener 并使用 event.target，這樣我就不需要多次宣告 EventListener 嗎？” 如果我解釋得如此奇怪和混亂，我很抱歉。我試圖解釋我頭腦風暴的想法。我會分享我的代碼以防萬一
這是 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 >
<div >
<p >Westagram</p>
</div>
<!-- ??? ?? -->
<div >
<div >
<input type="text" id="text" placeholder="Phone number, username, or email" />
</div>
<div >
<input type="password" id="password" placeholder="Password">
</div>
<div >
<button >Log in
</button>
</div>
</div>
<!-- ???? ?? ?? -->
<div >
<a >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)
我非常感謝您提前提供的幫助！
uj5u.com熱心網友回復：
您可以添加一個事件偵聽器嗎？是的。它是事件委托。您使用目標并檢查它是否是元素。檢查元素是否相同的多種方法。您可以使用 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>uj5u.com熱心網友回復：
您可以撰寫一個函式來防止重復完全相同的事件偵聽器：
function eventHandler(event, func, target ){
return target.addEventListener(event, func);
}
eventHandler("keyup", active, id);
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/318016.html
標籤：javascript dom