[javascript] form 태그를 이용한 input event listener

form 태그를 활용한 리팩토링

주석 처리한 코드가 이전 코드였던 부분입니다. 아래는 이전 코드에서의 이벤트 리슨 상황입니다.

1. input창에 keydown 이벤트가 발생 (keyCode가 "Enter, NumpadEnter"일 때)
2. Button태그에 Click이벤트

이 코드를 div를 form 태그로 바꿔주어 form태그를 리슨하면 훨씬 간결하게 바꿀 수 있습니다.

1. form태그에 submit이 일어나는지 리슨 (Enter Press, NumpadEnter Press, Click 3가지 케이스 전부 콜백펑션을 호출합니다.)

// 태그 선택
// const inputComment = document.querySelector('.articleInputComment input');
// const submitComment = document.querySelector('.articleInputComment button');
const commentForm = document.querySelector('.articleInputComment');


// 이벤트 리스너
// inputComment.addEventListener('keydown', addComment);
// submitComment.addEventListener('click', addComment);
commentForm.addEventListener('submit', (e) => addComment(e));

// 핸들러
function addComment(e) {
  e.preventDefault();
  //  if (e.isComposing || !(e.code === 'Enter' || e.code === 'NumpadEnter') || e.target.value === '') {
  //   return;
  // }  
  const comment = document.querySelector('.articleComment');
  const commentTime = document.querySelector('.articleCommentTime');
  const newComment = comment.cloneNode(true);
  newComment.children[0].children[0].innerHTML = userId;
  newComment.children[0].children[1].innerHTML = inputComment.value;
  comments.insertBefore(newComment, commentTime);
  inputComment.value = '';
}

앞으로 리팩토링 과정 중 좋은 케이스가 있으면 꾸준히 기록을 남겨 재활용해야겠습니다. 클린코더를 향해 가즈아!!!!🚀🚀🚀🚀