[UMC]Event

Web 5주차 워크북

UMC notion

📝 실습 체크리스트

• 실습 결과: https://chlwlstlf.github.io/UMC/index5.html

  const $commentForm = document.querySelector("#commentInputContainer");
  const $commentInput = document.querySelector("#commentInput");
  const $commentList = document.querySelector("#commentsList");
  
  $commentForm.addEventListener("submit", handSubmit);
  
  function handSubmit(event) {
    event.preventDefault();
    const newComment = $commentInput.value;
  
    if (!newComment) {
      return;
    }
  
    const newCommentItem = commentItemTemplate(newComment);
    $commentList.insertAdjacentHTML("afterbegin", newCommentItem);
    $commentInput.value = "";
  }
  

🔥 트러블 슈팅(실패한 경험도 성장을 위한 경험!)

• 트러블 슈팅 양식
  [ 문제 원인 ]
  [ 해결 방안 ]
  [ 참고 자료 ]

핵심 키워드 🎯

1. 이벤트 핸들러
target.이벤트이름 = 콜백함수(이벤트 핸들러)

const $div = document.querySelector(".container");

$div.onclick = handleClick; //콜백함수는 호출기호 없음

function handleClick() {
  console.log("clicked");
}

$div.onclick = () => console.log("clicked");

2. addEventListener

$div.addEventListener("click", handleClick);
$div.addEventListener("click", () => console.log("clicked"));

3. removeEventListener

$div.removeEventListener("click", handleClick);

4. 이벤트 target 확인

$div.addEventListener("click", handleClick);

function handleClick(event) {
  console.log(event.target.innerText);
}

5. input 내용 가져오기

const $input = document.querySelector("input");

$div.addEventListener("change", handleChange);

function handleChange(event) {
  console.log(event.target.value);
}

6. submit 자동 새로 고침 막기

const $form = document.querySelector("form");

$div.addEventListener("submit", handleSubmit);

function handleSubmit(event) {
  event.preventDefault();
  const inputValue = $input.value;
  console.log(inputValue);
  $input.value = "";
}

5주차 수업 후기 📢

• 5주차 수업을 듣고 서로 느낀 점을 이야기해주세요!
• 핵심 키워드에 대해 완벽하게 이해했는지? 혹시 이해가 안 되는 부분은 뭐였는지? 서로 이야기해주세요!

!주의사항

1. 과제 피드백 기반 진행입니다 - 한명씩 본인의 과제를 발표하는 시간 그리고 해온 과제에 대한 피드백을 하는 시간 (ex:전 이렇게 생각해서 이런 부분 다르게 해왔는데 저것도 괜찮은 것 같아요!)이 무조건 기반이 되어야 합니다!
2. 부가적으로 워크북에서 제공되는 키워드 혹은 강의에서 들은 디테일 적인 부분에서 더 토의해봐도 좋을 것 같습니다

논의해보면 좋은 것들 🔥

• addEventListener에 필요한 인자들에 대해 알아보기
• JavaScript 이벤트의 종류에 대해 조사하기