노마드코더 AI 기초 탄탄 클럽 #8 Events&Objects

노마드코더에서 수강 가능한 풀스택 웹 기초를 6주만에 훑는 챌린지. 해당 강의: JS #8은 JS로 Events&Objects 작성

챌린지 조건

1. 마우스가 title 위로 올라가면 텍스트가 변경되어야 합니다.
2. 마우스가 title을 벗어나면 텍스트가 변경되어야 합니다.
3. 브라우저 창의 사이즈가 변하면 title이 바뀌어야 합니다.
4. 마우스를 우클릭하면 title이 바뀌어야 합니다.
5. title의 색상은 colors 배열에 있는 색을 사용해야 합니다.
6. .css와 .html 파일은 수정하지 마세요.
7. 모든 함수 핸들러는 superEventHandler 내부에 작성해야 합니다.

객체 리터럴({})

• 데이터와 함수를 저장하는 곳. 실행부는 별도. 따라서 이 안에 addEventListener를 사용하는 것은 불가능하다.
• 객체 내부에서 addEventListener를 호출하려고 하면 자바스크립트는 이를 속성의 이름(Key)이나 값(Value)으로 해석하려고 시도한다. 하지만 target.addEventListener는 ‘값’이 아니라 ‘동작’이기 때문에 문법 오류(SyntaxError)가 발생한다.

이벤트 핸들러 구현하기

const superEventHandler = {
  함수이름: function () {
    // 여기에 실행할 코드 작성
  },
  함수이름() {
    // 여기에 실행할 코드 작성
  },
};

window.addEventListener("resize", superEventHandler.함수이름); // 함수와 이벤트를 연결

• mouseenter, mouseleave → 특정 요소(title)에 걸어야 함.
• resize → 브라우저 전체(window)에 걸어야 함.
• contextmenu는 target을 어디에 두느냐에 따라 특정 요소 또는 브라우저 전체 둘 다 사용 가능.

Series: 노마드코더 - AI 기초 탄탄 클럽