질문이 있습니다.

인터랙티브 웹 개발 제대로 시작하기

3개의 문 5

작성

149

function doorHandler(e) {
    const targetElem = e.target;
    

    if ( !targetElem.classList.contains('stage') && currentItem ) {
        let tgid = parseInt(targetElem.parentNode.dataset.id);
        if ( tgid ) {
            inactivate(currentItem);
        }
    } 
    if ( targetElem.classList.contains('door-body') ) {
        activate(targetElem.parentNode);
    }
};

/*
     문이 닫히지 않는 조건을 2개 적용했습니다.
          1.  stage 클릭했을 때
          2. 열려있는 문을 클릭했을 때

     1번의 경우,  !targetElem.classList.contains('stage')
     2번의 경우,
          let tgid = parseInt(targetElem.parentNode.dataset.id);
        if ( tgid ) {
            inactivate(currentItem);
        }
      
      위 1,2번으로 조건을 적용하였는데 이렇게 적용하면 맞는 걸까요?
      기능상으로는 제가 원하는 대로 작동은 합니다만
      이 방법이 맞는 건지, 또는 좀 더 나은 방법이 있는 건지
      궁금해서 여쭤봅니다.
*/

인터랙티브-웹 javascript HTML/CSS

답변 2

1분코딩

지식공유자

stage 클래스를 조건으로 하지 않고, door-body를 클릭했을 때만 동작하도록 아래처럼 하는 방법도 있습니다.

function doorHandler(e) {
				const targetElem = e.target;

				if (targetElem.classList.contains('door-body')) {
					if (currentItem) {
						inactivate(currentItem);
					}
					activate(targetElem.parentNode);
				}
			}

정답이 따로 있는 것은 아니므로 상황에 맞게 최대한 간단하면서 커버할 수 있는 범위가 넓게 작성하시면 좋습니다.
"이벤트 위임 보강 영상" 챕터에 있는 영상도 복습해보시고 타겟 설정을 디테일하게 하는 방법에 익숙해져보시는 것도 좋습니다^^

이은혜

질문자

정말 간결하게 적용할 수도 있네요! 덕분에 또 하나 배우고 갑니다.

답변 정말 감사합니다!

인프런 커뮤니티 질문&답변

질문이 있습니다.