javaScript2_마우스 이벤트_실습과제
실습 창의 코드는 효준이가 장만한 새로운 집의 평면도를 HTML과 CSS로 구현한 코드입니다. 다만, 코드를 실행해보면 아직 각 공간이 어떤 공간인지는 표시되지 않았는데요.
HTML 코드를 좀 더 자세히 살펴보니 몇몇 태그에 data-title 속성에 각 태그가 의미하는 공간이 어떤 공간인지 적혀있습니다.
data-title 속성과 자바스크립트를 활용해서 마우스 커서가 해당 태그 위로 올라가면 data-title 속성의 값이 나타나도록 코드를 완성해 주세요.
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>효준이네 집</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="map"> <div class="balcony" data-title="발코니"></div> <div class="room"> <div class="room-1" data-title="침실"> <div class="door"></div> <div class="window"> <span></span> <span></span> <span></span> <span></span> </div> </div> <div class="room-2" data-title="침실/거실"> <div class="window"> <span></span> <span></span> <span></span> <span></span> </div> <div class="window window-2"> <span></span> <span></span> <span></span> <span></span> </div> </div> </div> <div class="other"> <div class="bathroom" data-title="욕실"> <div class="door"></div> <div class="bath"></div> <div class="bathroom-block"> <div class="sink"></div> <div class="toilet"></div> </div> </div> <div class="utility-room" data-title="다용도실"> <div class="door"></div> </div> <div class="entrance" data-title="현관/입구"> <div class="door"></div> <div class="wall"></div> </div> <div class="kitchen" data-title="주방/식당"> <div class="kitchen-block"> <div class="kitchen-sink"></div> <div class="stoves"> <div class="stove"></div> <div class="stove"></div> </div> </div> </div> </div> </div> <script src="index.js"></script> </body> </html>
// showTitle 함수를 완성해 주세요. //마우스 커서가 해당 태그 위로 올라가면 data-title 속성의 값이 나타나도록 코드를 완성해 주세요. function showTitle(e) { if(e.target.dataset.title){ /*JavaScript에서는 dataset을 통하여 값을 가져올 수 있다. 속성에 접근하는 방법은 data 속성의 data-부분을 뺀 뒷부분만 사용하며 - 뒤 첫번째 영단어는 대문자로 작성하여야 한다. (데이터 속성 이름에서data-를 뺀 뒤 camelCase로 변환.) ex) data-color-type > dataset.colorType */ const span = document.createElement('span'); //span태그는 const span = document.createElement('span');으로 만들고, span.classList.add('title'); //class 값은 span.classList.add('title')혹은 span.className = 'title'로 추가할 수 있습니다. span.textContent = e.target.dataset.title; //span 태그 내부에 data-title 속성의 값을 할당하는 부분은 innerHTML 프로퍼티를 활용해도 되지만 //문자열이니깐 textContent를 활용해서 span.textContent = e.target.dataset.title;처럼 작성하면 좋을 것 같습니다. e.target.append(span); //target 프로퍼티에 담긴 요소에 span 태그를 마지막 자식 요소로 추가해야 하니깐 //append메소드를 활용해서 e.target.append(span);처럼 작성하면 되겠죠? } } // removeTitle 함수를 완성해 주세요. //처음에는 showTitle을 작성할 때와 똑같이 일단 조건문으로 이벤트 객체의 target 프로퍼티 요소에 //data-title 속성의 값을 가지고 있는지 확인하고 target 프로퍼티에 담긴 요소의 //마지막 자식 요소를 삭제하기만 하면 되는데요. function removeTitle(e) { if (e.target.dataset.title) { e.target.lastElementChild.remove(); } } // '대상'과 '타입'을 수정해 주세요. //이벤트 위임의 개념을 적용해보자.(요소 각각에 이벤트 핸들러를 하나씩 등록할 필요 없이 부모 요소에서 한 번에 자식 요소들에 발생한 이벤트를 관리.) //이벤트 위임을 고려해서 이벤트 핸들러를 등록할 대상을 HTML 문서에서 찾아보면 이벤트 핸들러가 동작해야 할 태그들의 공통 부모 태그인 map이라는 class를 가진 div 태그가 가장 적절.(대상) 🔹마우스 포인터가 요소밖->요소안==>mouseover 또는 mouseenter 🔹마우스 포인터가 요소안->요소밖==>mouseout 또는 mouseleave //mouseenter와 mouseleave는 버블링이 일어나지 않고 자식 요소 노드들의 범위를 계산 안함. //그래서 명확히 이벤트 핸들러가 등록된 그 요소에서만 이벤트가 발생하길 원할때만 사용. //반면에 mouseover와 mouseout은 이벤트 버블링이 일어나고 자식 요소 노드들의 범위도 구분함. //그래서 이벤트 위임이나 혹인 자식 요소의 영역에서도 이벤트가 발생하길 원할때 사용. const map = document.querySelector('.map'); //Document.querySelector()는 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫 번째 Element를 반환합니다. 일치하는 요소가 없으면 null을 반환합니다. map.addEventListener('mouseover', showTitle); map.addEventListener('mouseout', removeTitle);
Hello world