[자바스크립트] EventListener

🐾 HTML과 JavaScript의 관계

HTML의 style을 변경할때는 CSS를 사용하고, animation 부분에 효과를 주려면 JavaScript를 사용한다. JavaScript는 HTML을 객체 형태로 불러올 수 있고, HTML에 쓰여진 내용들을 바꿀 수 있다. 이처럼 HTML과 JavaScript는 여러 부분에서 아주 긴밀하게 연결되어 있다.

🐾 자바스크립트에서 HTML의 특정 요소 찾기

1. document.getElementById("title");
   → html에서 해당 id를 가지고 있는 요소를 찾음.

2. document.querySelector(".hello h1");
   → hello class 안에 h1을 찾아서 반환. 클래스 안에 수많은 h1 요소가 있다면 첫번째 h1 요소만 반환.
   → id를 사용해서 반환할 때는 document.querySelector("#hello");처럼 #을 이용하여 id 명시

3. document.querySelectorAll(".hello h1");
   → hello class 안에 모든 h1을 반환하고 싶을 때 사용. 배열 형식으로 반환됨.

🐾 EventListner 예시

사용 가능한 EventListener 목록 (페이지 왼쪽 리스트에서 'on'으로 시작되는 속성)

const h1 = document.querySelector("div.hello:first-child h1");

function handleTitleClick() {
    h1.style.color = "green";
}

function handleMouseEnter() {
    h1.innerText = "Mouse is here";
}

function handleMouseLeave() {
    h1.innerText = "Mouse is gone";
}

function handleWindowResize() {
    document.body.style.backgroundColor = "tomato"; // document.body의 body는 html의 body를 의미
}

function handleWindowCopy() {
    alert("Copier!");
}

function handleWindowOffline() {
    alert("SOS no WIFI");
}

function handleWindowOnline() {
    alert("All Goooood!");
}

h1.addEventListener("click", handleTitleClick);   // handleTitleClick 함수 옆에 ()는 무조건 생략
h1.addEventListener("mouseenter", handleMouseEnter);
h1.addEventListener("mouseleave", handleMouseLeave);

window.addEventListener("resize", handleWindowResize);
window.addEventListener("copy", handleWindowCopy);
window.addEventListener("offline", handleWindowOffline);
window.addEventListener("online", handleWindowOnline);

h1.onclick = handleTitleClick;의 형식보다 addEventListner()의 형식을 많이 사용하는 이유는 removeEventListener()로 제거가 가능하기 때문.

🎁 참조 및 출처

• 노마드코더 [바닐라 JS로 크롬 앱 만들기] #3.0 - #3.8 전반적인 내용
  https://nomadcoders.co/javascript-for-beginners/lectures/2890