요소 안 링크 잡아내기
본 튜토리얼은 전 세계 사람들이 이용할 수 있는 오픈 소스 프로젝트입니다. 프로젝트 페이지에 방문하셔서 번역을 도와주세요.
구매EPUB/PDF
튜토리얼 지도
돌아가기

요소 안 링크 잡아내기

중요도: 5

사용자가 id가 contents인 요소 안에 있는 링크를 클릭했을 때 정말 사이트를 떠나 해당 링크로 갈지를 물어보는 기능을 구현해봅시다. 그리고 사용자가 사이트를 떠나지 않겠다고 하면, 사이트에 남아있어야 합니다.

예시:

주의사항:

  • 요소 안 HTML은 언제든지 동적으로 로드되거나 재생성될 수 있습니다. 따라서 모든 링크를 찾아 핸들러를 적용할 수 없습니다. 그러니 이벤트 위임을 사용해 답안을 작성해보세요.
  • idê°€ contents인 요소 안에는 중첩 태그가 있을 수 있습니다. 링크 안에도 마찬가지로 <a href=".."><i>...</i></a> 이렇게 중첩 태그가 존재할 수 있습니다.

샌드박스를 열어 정답을 작성해보세요.

이 문제는 이벤트 위임 패턴을 잘 활용할 수 있는 문제입니다.

사용자에게 현재 페이지를 떠날 것인지 물어보는 대신, 방문자가 떠난 위치를 저장하는 서버에 ‘logging’ 요청을 보낼 수 있습니다. 가능하다면 내용을 불러와서 현재 페이지에 바로 보이게 하는 방법을 사용할 수도 있습니다.

그러니까 contents.onclick를 잡아낸 다음, 사용자에게 물어보기 위해 confirm을 사용하기만 하면 됩니다. URL에 link.href 대신 link.getAttribute('href')를 사용하는 것이 더 좋은 방법입니다. 자세한 사항은 샌드박스의 해답에서 확인해보세요.

샌드박스를 열어 정답을 확인해보세요.