[JavaScript] 이벤트 위임(event delegation)

빵호·2021년 8월 11일

시작 전 주절주절

인스타그램 클론 코딩 중 댓글 추가 기능을 구현하고 추가로 댓글 삭제 및 좋아요 기능을 구현하고 있었다.

시작 전에는 새로 추가된 태그에 이벤트를 추가하면 되겠네 이 정도면 쉽지~ 😗 라고 생각을 했는데

막상 시작을 해보니 DOM을 통해 새로 추가된 태그에 이벤트를 넣는 게 생각보다 쉽지는 않았다.

삽질한 코드는 잘 기억이 나지는 않지만 해당 클래스에 for 문 그 안에 이벤트를 추가한 거 같다.

for (i = 0; i < Comment[i].lentgth; i++ {
  Comment[i].addEventlistener("click", () => {
	if (src === heart) {
    	src = redHeart
    } else {
     	src = heart
    	}
  }
}

위 코드처럼 작성을 하니 자바스크립트가 불러와지는 순간 실행이 되어 HTML로 미리 작성한 태그에만

좋아요 와 삭제 기능이 추가가 되고 DOM을 통해 추가된 태그에는 적용이 되지 않았다. 그래서 점심시간에

동기분에게 '댓글 삭제랑 좋아요 기능을 추가하는데 어떻게 해야 할지 모르겠다 머리가 아프다.'라고 하니

바로 이 이벤트 위임(event delegation)에 대해 말씀해 주셔서 기능들을 잘 추가할 수 있었다.

이벤트 위임(event delegation)

이벤트 위임은 비슷한 방식으로 여러 요소를 다뤄야 할 때 사용하면 된다. 이벤트 위임을 사용하면 요소마다

이벤트를 추가하지 않고 요소의 공통 조상에 이벤트 핸들러 하나만 추가해도 여러 요소에서 사용이 가능하다.

HTML

<div class="comment">
    <div>
        <span class="boldFont">bbangho</span> 한강 다녀감~✌️
    </div>
    <div>
        <span class="boldFont">manja</span> 한강 갱~ 🔫 🔫
        <img class="commentDelete" alt="댓글 삭제" src="./img/garbage.png">
        <img class="commentHeart" alt="댓글 하트" src="./img/heart.png">
        <div>42분 전</div>
    </div>
</div>

comment.addEventListener("click", (event) => {
    const src = event.target.getAttribute("src")
    const heart = "./img/heart.png"
    const redHeart = "./img/redHeart.png"
    const deleteIcon = "./img/garbage.png"

    if (src === heart) {
        event.target.src=redHeart;
    } else if (src === redHeart) {
        event.target.src=heart;
    }

     if (src === deleteIcon) {
        event.target.parentNode.remove()
     }
});