Event-Bubbling/Capturing | Event-Delegation

Park Bumsoo·2022년 3월 28일

Event-Bubbling/Capturing

Event-Bubbling은 자식에서 부모로 이벤트가 전파 시키는것이다.

반대로 부모에서 자식으로 전파되는것을 Event-Capturing 이라한다.

id를 통해 호출해올경우
event.target.id이 아닌 devent.currentTarget.id를 사용한다.
아래의 경우는 onClick={onClickAlert}이라는 alert을 띄워주는 온클릭 이벤트를 통해 영역 내에서 클릭시 id={el.writer}가 있는곳에 한해서 클릭시 이벤트를 띄워준다.
이 방법은 원하는 위치마다 id={el.writer}를 줘야하기 때문에 비 효율적이다.

	const onClickAlert = (event: any) => {
    alert(`${event.target.id}님이 작성한 댓글입니다.`);
  };

함수를 위처럼 작성시 많은 위치에 id를 준 모습이다.
아래 HTML 부분을 보면 다양한곳에 id가 보인다.

	{props.dataComment?.fetchBoardComments.map((el: any) => (
                <>
                  <S.CommentDetailBox key={el._id} onClick={onClickAlert}>
                    <S.CommentDetailPicture></S.CommentDetailPicture>
                    <S.CommentDetailInfo>
                      <S.CommentWriter>
                        <S.CWriter id={el.writer}>  
                          작성자 : {el.writer}
                        </S.CWriter>
                        <S.CStar id={el.writer}>평점: {el.rating}</S.CStar> 
                      </S.CommentWriter>
                      <S.CommentContents id={el.writer}>{el.contents}</S.CommentContents>
                      <S.CommentTime>
                        {String(el.createdAt).slice(0, 10)}
                      </S.CommentTime>
                    </S.CommentDetailInfo>
                    <S.CommentDetailEdit>
                      <S.CEdit onClick={props.DisplayOnOff}>수정하기</S.CEdit>
                      <S.CDelete onClick={props.deleteOneComment} id={el._id}>
                        삭제하기
                      </S.CDelete>
                      <S.CPw
                        placeholder="    비밀번호"
                        type={"password"}
                        onChange={props.onChangeCommentPw}
                      ></S.CPw>
                    </S.CommentDetailEdit>
                  </S.CommentDetailBox>

그러나 아래의 코드처럼 currentTarget을 이용하여 함수부분을 작성해주고

	const onClickAlert = (event: any) => {
    alert(`${event.currentTarget.id}님이 작성한 댓글입니다.`);
  };

<S.CommentDetailBox> 부분 즉 최상위 부모태그에만 id를 적어주면
모든 자식태그의 위치를 클릭해도 이벤트가 발생하여 alert이 나오게된다.

	{props.dataComment?.fetchBoardComments.map((el: any) => (
                <>
                  <S.CommentDetailBox
                    key={el._id}
                    id={el.writer}
                    onClick={onClickAlert}
                  >
                    <S.CommentDetailPicture></S.CommentDetailPicture>
                    <S.CommentDetailInfo>
                      <S.CommentWriter>
                        <S.CWriter>작성자 : {el.writer}</S.CWriter>
                        <S.CStar>평점: {el.rating}</S.CStar>
                      </S.CommentWriter>
                      <S.CommentContents>{el.contents}</S.CommentContents>
                      <S.CommentTime>
                        {String(el.createdAt).slice(0, 10)}
                      </S.CommentTime>
                    </S.CommentDetailInfo>
                    <S.CommentDetailEdit>
                      <S.CEdit onClick={props.DisplayOnOff}>수정하기</S.CEdit>
                      <S.CDelete onClick={props.deleteOneComment} id={el._id}>
                        삭제하기
                      </S.CDelete>
                      <S.CPw
                        placeholder="    비밀번호"
                        type={"password"}
                        onChange={props.onChangeCommentPw}
                      ></S.CPw>
                    </S.CommentDetailEdit>
                  </S.CommentDetailBox>