230327 - eventHandler

λ°±μŠΉμ—°Β·2023λ…„ 3μ›” 27일
1

🚩 javascript event

eventHandler

  • onblur : focusμ—μ„œ 벗어났을 λ•Œ μž‘λ™λ¨

πŸ“ μ„€λͺ…

  • μ΄λ²€νŠΈκ°€ λ°œμƒλ˜λ©΄ μ‹€ν–‰λ˜λŠ” ν•¨μˆ˜λ₯Ό λœ»ν•œλ‹€.


βœ’οΈ μ½”λ“œ μž‘μ„±

μž…λ ₯

예제1

css

* { margin: 0; padding: 0; }
body { background: #BDCDD6; }
body > div { width: 400px; margin: 150px auto; padding: 2px; border: 3px solid #7170b4; border-radius: 15px; }
h1 { margin: 10px 0; text-align: center; }
h2 { color: #5f689e; margin-bottom: 30px; text-align: center; }
h1 img { width: 150px; }

/* μ‚¬μš©μž 지정 */
#feedback_wrap { height: 30px; }
#feedback {
  padding-left: 30px;
  background: url("../img/event_alarm.png") no-repeat;
}

form {
  padding: 0 50px 20px; /* 상 쒌우 ν•˜ */
}
label { 
  display: block;
  padding: 20px 0 5px;
}
input[type="text"],
input[type="pw"] {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 5px;
}

input[type="text"]:focus,
input[type="pw"]:focus { 
  outline: none; 
  background: #e7f6ff;
}

.submit { 
  padding-top: 10px;
  text-align: right;
}
input[type="submit"] {
  padding: 10px;
  border: none;
  border-radius: 5px;
  background: #849dca;
  color: #fff;
}
input[type="submit"]:hover { background: #5f689e; }

html

<div id="page">
  <h1><img src="./img/kiwi_icon.png" alt="" /></h1>
  <h2>두 번째 제λͺ©</h2>
  <form action="">
    <div id="feedback_wrap">
      <div id="feedback">ν”Όλ“œλ°±μ΄ λ“€μ–΄κ°€λŠ” λΆ€λΆ„</div>
    </div>

    <label for="username">μ‚¬μš©μž 이름 : </label>
    <input type="text" id="username"> <!-- label에 μ—°κ²° -->

    <label for="pw">λΉ„λ°€λ²ˆν˜Έ : </label>
    <input type="text" id="pw"> <!-- label에 μ—°κ²° -->

    <div class="submit">
      <input type="submit" value="LOG IN">
    </div>
  </form>
</div>

js

//예제 1 - html νƒœκ·Έμ— 직접 μ‚¬μš©
// λͺ¨λ“  μ˜ˆμ œμ—μ„œ κ³΅ν†΅μœΌλ‘œ μ‚¬μš©ν•˜λŠ” λΆ€λΆ„
const elName = document.getElementById("username");
const elMsg = document.getElementById("feedback");
let myName;

function checkName() {  
  // 예제 1 ~ 4의 if문
  if (elName.value.length < 5) {
    elMsg.textContent = "이름은 5κΈ€μž 이상 μ¨μ£Όμ„Έμš”";
  }
  
  // 예제 5의 if문
  myName = elName.value; // λ°›μ•„μ˜¨ μž…λ ₯ν•œ λ‚΄μš©μ„ myName λ³€μˆ˜μ— λ„£λŠ”λ‹€.

  if (elName.value.length < minLength) {
    elMsg.textContent = `${myName}λ‹˜, 이름은 ${minLength}κΈ€μž 이상 μ¨μ£Όμ„Έμš”`;
  }
}


// 예제 2 script μΆ”κ°€. html νƒœκ·Έμ— onblur 없을 λ•Œ μ‚¬μš©
// elName.onblur = checkName();
// ν•¨μˆ˜μ— ()κ°€ 있으면 이벀트둜 μ‹€ν–‰λ˜λŠ” 것이 μ•„λ‹ˆλΌ λ‘œλ“œλ  λ•Œ ν•¨μˆ˜κ°€ λ°œμƒλ¨
elName.onblur = checkName;

// 예제 3 script μΆ”κ°€
elName.addEventListener("blur", checkName);
// Element.addEventListener("event", function);

// 예제 4 script μΆ”κ°€ (IE9μ΄ν•˜ λ²„μ „μ˜ 이벀트 λ¦¬μŠ€λ„ˆ)
// elName.addEventListener("event", function) - IE9 이상 버전
if (elName.addEventListener) { // 이벀트 λ¦¬μŠ€λ„ˆλ₯Ό μΈμ‹ν–ˆμ„ λ•Œ
  elName.addEventListener("blur", checkName)
} else {
  elName.attachEvent("blur", checkName)
  // attachEvent() : JS 초창기 Web API
}

// 예제 5 script μΆ”κ°€
// elName.addEventListener("event", function) - IE9 이상 버전
elName.addEventListener("blur", function() {
  checkName(myName, 7);
});
// ν•¨μˆ˜μ— λ§€κ°œλ³€μˆ˜κ°€ ν•„μš”ν•  λ–„λŠ” 직접 ()λ₯Ό μ“Έ 수 μ—†μ–΄μ„œ function(){}을 이용

// 예제 6 script μΆ”κ°€ - focus()
function autoFocus() {
  elName.focus();
}
// 화면이 싀행될 λ•Œ μž‘λ™
window.addEventListener("load", autoFocus); 
// μ•„λž˜μ™€ 같은 μ½”λ“œ. μ•„λž˜ μ½”λ“œλŠ” ν•¨μˆ˜λ₯Ό ν•œλ²ˆμ— μ§€μ •ν•œ 것
// window.addEventListener("load", function() {
//   elName.focus();
// });

좜λ ₯

  • μ΄λ―Έμ§€λ‘œ λŒ€μ²΄

예제 1 ~ 4

예제 5, 6


πŸ”— μ°Έκ³  링크 & 도움이 λ˜λŠ” 링크






profile
κ³΅λΆ€ν•˜λŠ” 벨둜그

0개의 λŒ“κΈ€