JavaScript 인터뷰 질문 — DOM 및 이벤트 질문

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

프론트엔드 개발자로 일하려면 코딩 인터뷰를 해야 합니다.

이 기사에서는 DOM 조작 및 이벤트 처리에 대한 몇 가지 어려운 질문을 살펴보겠습니다.

다시 그리기란 무엇이며 언제 발생하나요?

다시 그리기는 크기와 모양을 변경하지 않고 요소의 모양을 변경할 때 발생합니다.

치수와 위치가 변하지 않기 때문에 리플로가 발생하지 않습니다.

다시 그리기 프로세스는 요소가 배경색을 변경하거나, 텍스트 색상을 변경하거나, 가시성을 숨길 때 발생합니다.

DOM이 $(document).ready와 같이 준비되었을 때 JavaScript를 어떻게 실행할 수 있습니까?

스크립트를 HTML 본문 요소에 넣을 수 있습니다. 브라우저가 스크립트 태그를 실행할 때 DOM은 준비됩니다.

또한 DOMContentLoaded 이벤트 핸들러 안에 코드를 넣을 수 있습니다. 내부 코드는 DOM이 완전히 로드된 경우에만 실행됩니다.

예를 들어 다음과 같이 작성할 수 있습니다.

document.addEventListener('DOMContentLoaded', () => {
  console.log('DOM loaded');
});

리스너를 첨부하여 readystatechange 이벤트를 볼 수도 있습니다.
readyState가 'complete'이면 DOM이 로드되었음을 알 수 있습니다.

예를 들어 다음 코드를 작성하여 이를 수행할 수 있습니다.

document.onreadystatechange = () => {
  if (document.readyState == "complete") {
    console.log('DOM loaded');
  }
}

이벤트 버블링이란? 이벤트는 어떻게 진행되나요?

이벤트 버블링은 이벤트가 원래 요소에서 부모, 조부모, 그리고 window 개체까지 전파됨을 의미합니다.

브라우저는 원래 요소 외에 원래 요소의 모든 상위 요소에 첨부된 모든 이벤트 핸들러를 실행합니다.

예를 들어 다음 HTML이 있는 경우:

<div>
  <p>
    <button>Click</button>
  </p>
</div>

그런 다음 이벤트 리스너를 모든 요소와 document 및 window에 다음과 같이 연결합니다.

const div = document.querySelector('div');
const p = document.querySelector('p');
const button = document.querySelector('button');

button.onclick = () => {
  alert('button clicked');
}

p.onclick = () => {
  alert('p clicked');
}

div.onclick = () => {
  alert('div clicked');
}

document.onclick = () => {
  alert('document clicked');
}

window.onclick = () => {
  alert('window clicked');
}

클릭 버튼을 클릭하면 코드에 나열된 것과 동일한 순서로 나열된 모든 경고가 표시됩니다.

따라서 '버튼 클릭', 'p 클릭', 'div 클릭', '문서 클릭' 및 '창 클릭' 경고가 순서대로 표시됩니다.

한 번의 클릭 핸들러로 여러 목록 항목을 제거하려면 어떻게 해야 하나요?

이를 위해 이벤트 위임을 사용할 수 있습니다.

목록의 상위 요소 클릭을 수신하여 작동합니다. 그런 다음 클릭 핸들러에서 어떤 자식이 클릭되었는지 확인한 다음 DOM에서 해당 요소를 제거할 수 있습니다.

예를 들어 다음 HTML이 있는 경우:

<ul>
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>forth</li>
    <li>Fifth</li>
</ul>

그런 다음 다음 JavaScript 코드를 작성하여 클릭한 li 요소를 다음과 같이 제거할 수 있습니다.

document.querySelector('ul').addEventListener('click', (e) => {
  const elm = e.target.parentNode;
  elm.removeChild(e.target);
  e.preventDefault();
});

위의 코드에서 ul을 얻기 위해 클릭한 요소의 parentNode 속성을 얻습니다.

그런 다음 removeChild가 우리가 클릭한 요소인 li이므로 클릭한 li를 제거하기 위해 e.target를 호출할 수 있습니다.

마지막으로 preventDefault를 호출하여 이벤트 전파를 중지합니다.

클릭하면 소멸되는 버튼을 생성하지만 그 자리에 두 개의 새 버튼이 생성됩니다.

클릭한 버튼을 제거하기 위해 위의 논리를 사용하여 이를 수행할 수 있습니다.

그런 다음 use createElement 및 appendChild를 추가하여 더 많은 버튼을 만들고 목록에 추가합니다.

예를 들어 다음 HTML이 제공됩니다.

<div>
  <button>button</button>
</div>

다음 JavaScript 코드를 작성하여 2개의 버튼을 추가한 다음 div에 클릭 리스너를 연결한 다음 버튼을 조작하여 클릭된 원래 버튼을 제거합니다.

document.querySelector('div').addEventListener('click', (e) => {
  if (e.target.tagName === 'DIV') {
    return;
  }
  const elm = e.target.parentNode;
  e.preventDefault();

  const btn = document.createElement('button');
  btn.innerHTML = 'button';

  const btn2 = document.createElement('button');
  btn2.innerHTML = 'button';

  elm.appendChild(btn);
  elm.appendChild(btn2);
  elm.removeChild(e.target);
});

위의 코드에서 우리는 실제로 버튼을 클릭했는지 확인합니다.

그렇다면 2개의 버튼을 계속 생성합니다. 그런 다음 div인 클릭된 버튼의 appendChild에서 parentNode를 호출하여 2개의 버튼을 연결합니다.

그런 다음 removeChild에서 e.target를 호출합니다. 이 버튼은 div가 아님을 확인했기 때문에 버튼을 제거해야 합니다.

결론

DOM이 readystatechange 또는 DOMContentLoaded 이벤트로 준비되었는지 확인할 수 있습니다.

이벤트 버블링은 요소의 이벤트가 DOM 트리 위로 전파될 때 발생합니다.
appendChild 및 removeChild는 요소를 추가 및 제거하는 데 사용됩니다. 이벤트 위임으로 여러 자식 요소의 이벤트를 처리할 수 있습니다.

지오메트리를 변경하지 않고 요소의 모양을 변경할 때 다시 그리기가 발생합니다.