자바스크립트 기초[event 1]

✔️ document

HTML과 Javascript의 상호 작용

✔️ getElementById()

• 하나의 값만 가져올 수 있다.
• id 이름만 가져 온다.

✔️ getElementClassName()

• 많은 element를 가져올 때 사용한다.
• class 이름만 가져 온다.

✔️ getElementTagName()

• name을 할당 할 수 있다.

✔️ querySelector, querySelectorAll()

• element를 css selector 방식으로 검색할 수 있다.
• 단 하나의 element를 return해 준다.
• 중복요소가 많은 경우 querySeletor는 첫번째 요소만, querySelectorAll은 모든 조건들을 보여준다.

const h1 = document.querySelector(".hello h1");

📍Event

마우스, 키보드 등을 이용한 모든 행위

✔️ addEventlistener

Javascript를 listen하는 것

h1.addEventlistener("click", function 이름);

📄 마우스 event 옵션 몇 가지

• mouseenter (마우스 댈 경우)
• mouseleave (마우스 벗어 날 경우)
• resize (사이즈 조절 할 경우)
• copy (복사 할 경우)
• offline/online (와이파이 연결 유무)

🔍 event종류를 찾고 싶을 때

• element 내부를 확인하고 싶은 경우 console.dir()로 확인 가능하다.
• [검색할 속성] element mdn 검색 후 검색 리스트 중 "Web APIs"를 찾아 확인해 본다.

✔️ event 작성 두가지 방법

title.onclick = title; //첫번째 방법
title.addEventlistener("click", title); //두번째 방법

두가지 방법이 있으나 첫번째는 자주 사용하는 방식은 아니라고 한다.