요소 안 링크 잡아내기
중요도: 5
사용자가 id가 contents인 요소 안에 있는 링크를 클릭했을 때 정말 사이트를 떠나 해당 링크로 갈지를 물어보는 기능을 구현해봅시다. 그리고 사용자가 사이트를 떠나지 않겠다고 하면, 사이트에 남아있어야 합니다.
예시:
주의사항:
- 요소 안 HTML은 언제든지 동적으로 로드되거나 재생성될 수 있습니다. 따라서 모든 링크를 찾아 핸들러를 적용할 수 없습니다. 그러니 이벤트 위임을 사용해 답안을 작성해보세요.
id가contents인 요소 안에는 중첩 태그가 있을 수 있습니다. 링크 안에도 마찬가지로<a href=".."><i>...</i></a>이렇게 중첩 태그가 존재할 수 있습니다.
이 문제는 이벤트 위임 패턴을 잘 활용할 수 있는 문제입니다.
사용자에게 현재 페이지를 떠날 것인지 물어보는 대신, 방문자가 떠난 위치를 저장하는 서버에 ‘logging’ 요청을 보낼 수 있습니다. 가능하다면 내용을 불러와서 현재 페이지에 바로 보이게 하는 방법을 사용할 수도 있습니다.
그러니까 contents.onclick를 잡아낸 다음, 사용자에게 물어보기 위해 confirm을 사용하기만 하면 됩니다. URL에 link.href 대신 link.getAttribute('href')를 사용하는 것이 더 좋은 방법입니다. 자세한 사항은 샌드박스의 해답에서 확인해보세요.