실습 설명
얼마 전 월급이 오른 효준이는 큰맘 먹고 집을 이사했습니다. 비록 전셋집이지만 나름대로 만족스러운 집을 구했어요.
실습 창의 코드는 효준이가 장만한 새로운 집의 평면도를 HTML과 CSS로 구현한 코드입니다. 다만, 코드를 실행해보면 아직 각 공간이 어떤 공간인지는 표시되지 않았어요.
HTML 코드를 좀 더 자세히 살펴보니 몇몇 태그에 data-title 속성에 각 태그가 의미하는 공간이 어떤 공간인지 적혀있습니다.
data-title 속성과 자바스크립트를 활용해서 마우스 커서가 해당 태그 위로 올라가면 data-title 속성의 값이 나타나도록 코드를 완성해 주세요.
세부적인 조건은 다음과 같습니다.
- showTitle 함수
showTitle 함수가 호출되면 가장 먼저 조건문을 통해 이벤트 객체의 target 프로퍼티에 담긴 요소에 data-title 속성의 값을 가지고 있는지 확인합니다.
조건문이 true일 경우 span 태그 형태의 요소 노드를 생성합니다.
이 요소 노드는 'title'이라는 class 값을 가지고 있어야 합니다.
이 요소 노드의 내부에 target 프로퍼티에 담긴 요소의 data-title 속성에 담긴 값을 할당해 주세요.
이 요소 노드를 target 프로퍼티에 담긴 요소의 마지막 자식 요소 노드로 추가해 주세요. - removeTitle 함수
removeTitle 함수가 호출되면 가장 먼저 조건문을 통해 이벤트 객체의 target 프로퍼티에 담긴 요소에 data-title 속성의 값을 가지고 있는지 확인합니다.
조건문이 true일 경우 이벤트 객체의 target 프로퍼티에 담긴 요소의 가장 마지막 자식 요소를 제거해 주세요. - 이벤트 핸들러 등록하기
앞서 만든 두 이벤트 핸들러를 하나의 요소 노드에만 등록해도 각 태그에 이벤트가 동작하도록 해주세요.
이벤트 위임을 고려했을 때 어떤 요소 노드에 이벤트 핸들러를 등록하면 좋을지 대상 부분을 수정해 주세요.
이벤트 위임을 고려했을 때 각각 타입의 이벤트로 이벤트 핸들러를 등록하면 좋을지 타입 부분을 수정해 주세요.
안녕하세요