[자바스크립트] EventListener

0jiiino·2021년 6월 21일
0

자바스크립트

목록 보기
8/8

🐾 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()로 제거가 가능하기 때문.


🎁 참조 및 출처

profile
무엇이든 할 수 있고, 무엇이든 될 수 있는

0개의 댓글