[24.07.28] 오늘 알게된 것들

클릭한 요소의 ID 출력하기

필수 구현요소였던 alert 창으로 영화 ID 띄우는 기능!

오늘의 작업을 시작하기 전 지난 요소들이 잘 작동하고있는지 확인을 해봤는데 영화 ID가 출력되지 않는 것을 발견했다.

1) 각 영화 데이터를 불러올 때 ID가 잘 받아지고있는지 출력해봄 -> 아주 잘 들어오고있다.

2) 클릭한 이벤트의 id를 콘솔 출력 -> 아무것도 없다!

3) 클릭한 이벤트의 돔 요소를 출력 -> 영화 카드가 아니라 마지막에 추가했던 영화 제목 등이 보이는 infoLayer가 출력됐다! 내가 영화 id를 추가한 요소는 그 상위 요소인 movieCard 였기 때문에 infoLayer에는 id가 없고, 그래서 아무것도 출력되지 않은 것이다.

 

시도

1) infoLayer css pointer-events:none 으로 설정

→ 이제는 포스터 이미지가 선택됨

 

2) poster 이미지도 pointer-events:none 설정

→ 해결됨

 

고민했던 점

infoLayer에 pointer-events: none을 설정했을 때 posterImage가 선택된 것을 보고 클릭된 요소의 부모 요소를 받아오도록 해야하나? 고민했다. (movieCard의 자식요소가 지금은 두개니까 하나하나 pointer-events 속성을 지정해줄 수 있지만 많아지면 설정을 잊을수도 있고 복잡해지지않을까? 싶어서) 하지만 infoLayer에 pointer-events를 무시하지 않았을 때 이것저것 눌러보면서 infoLayer 내부의 p태그들도 클릭된 요소로 따로 선택되는 것을 보면서 클릭된 요소의 부모 요소의 id를 불러온다면 중첩된 다른 태그를 클릭했을 때가 문제가 될 것이고 결국 그 중첩된 요소가 이벤트를 발생시킬 이유가 없다면 pointer-events를 none으로 설정하는게 낫겠다 싶었다.

 

또 하나하나 설정하는 것을 놓칠 수 있는 점은 movieCards의 자식요소들을 선택해 설정하도록 변경했다.

.movieCard > * {
  pointer-events: none;
}

 

시도 2

event.currentTarget 사용하기

기존 방식은 event.target.id를 출력하는 방식이었는데 event.currentTarget을 사용하면 자식 요소들이 아닌 이벤트 핸들러가 부착된 요소를 받아올 수 있다는 것을 알게되었다! 나중에 카드들에 다른 이벤트가 추가될 경우 pointer-events 가 적용되었는지 확인하고 수정하는 것보다 간단할 것 같아 id값을 가져오는 요소 자체를 변경해주었다.

// 기존
function alertID(event) {
  alert(`영화 ID: ${event.target.id}`);
}

// 변경
function alertID(event) {
  alert(`영화 ID: ${event.currentTarget.id}`);
}

 

 

체크박스에 이벤트

addEventListener("click", () => {}) 으로 등록했더니 한번 클릭할 때마다 이벤트 두번 발생

addEventListener("input", () => {}) 으로 변경

 

입력창에서 엔터 눌러도 검색되도록 하기

function pressEnter(event) {
  if (event.key === 'Enter') {
    event.preventDefault();
    const keyword = searchText.value;
    window.location.href = `./searchResult.html?keyword=${encodeURIComponent(keyword)}`;
  }
}

1) 엔터키 입력시 기본적으로 적용되는 동작을 막아준다.

2) 검색 버튼을 클릭했을 때와 마찬가지로 입력창의 값을 받아 쿼리 파라미터로 넘겨주었다.

 

숫자로 시작하는 id querySelector 검색 불가

숫자로 시작하는 id를 querySelector로 검색하려니 찾을 수 없다는 오류가 났다. 카드의 id를 `id_${숫자값}` 형태로 바꿔주었다. getElementById를 사용하면 숫자값만으로도 가능하다!