Javascript 동적으로 생성된 노드에 이벤트 추가하기

문제상황

다음과 같이 동적으로 생성된 댓글이 있다. 그런데 댓글의 하트아이콘과 삭제아이콘은 내가 누른 곳의 댓글에만 영향을 끼쳐야 한다.

TRY

1. document.querySelectorAll()을 통해 Node 배열에 접근하여 처리 하려 하였으나, 생성되지 않은 노드에 대해서 접근 할 방법이 없음.
2. Observer를 이용해 댓글이 달리는 곳에 설치 하고, 새로운 댓글이 달릴 때 마다 document.querySelectorAll() 를 새로 부르게 하였으나, 댓글이 3개면 첫번째 댓글에 좋아요를 누를 시 원하는 이벤트가 3번 발생되는 버그 발생

문제 해결

Javascript 동적으로 생성된 노드에 이벤트 추가하기

1. if(event.target에 해당클래스가 있는가?)

이 부분은 댓글 좋아요구현 시 사용 하였다.

  const handleCommentHeartIcon = (event) => {
    const classListArray = event.target.classList.value.split(' ');
    const isHeartButton = classListArray.find((classItem) => classItem === 'fa-heart');
    if (event.target && isHeartButton) {
      changeHeartIcon(event.target);
    }
  };

1. 아이콘 하나하나 마다 이벤트를 심는게 아니라 코멘트 전체를 감싸주는 CommentWrapper에 EventListner를 준다.
2. event.targe.className이 내가 원하는 값일 때만 이벤트가 일어났을 때 원하는 동작을 실행시킨다.

event.target 으로 접근하면 배열로 만들 필요 없이 타겟에만 반응하니 이런식으로 접근하여 해결하였다.

2. 요소 생성 시 addEventLister를 추가 하기

이 부분은 댓글 삭제 구현 시 사용하였다.

  const createComment = (userId = 'default id', commentMessage) => {
    const feedCommentList = document.querySelector('.feed-comment-list');
    const feedCommentItem = document.createElement('li');
    feedCommentItem.classList.add('feed-comment-item');
    const feedComment = `...commentHTML`;
    feedCommentItem.innerHTML = feedComment;
    feedCommentList.appendChild(feedCommentItem);

    handleDeleteComment(feedCommentItem);
  };

  const handleDeleteComment = (feedCommentItem) => {
    const deleteTrigger = feedCommentItem.querySelector('.fa-times');
    deleteTrigger.addEventListener('click', () => deleteComment(feedCommentItem));
  };

  const deleteComment = (feedCommentItem) => {
    feedCommentItem.remove();
  };

1. 노드를 생성함과 동시에 생성된 노드를 전달받는 삭제 핸들링 함수를 만든다.
2. 삭제 핸들링 함수는 X 버튼이 눌렀을 때 전달 받은 노드를 삭제한다.