JS) [Event] 이벤트 활용하기 ... addEventListener, Window

document를 활용하면 많은 이벤트들을 다룰 수 있다.

 

간단한 예시를 통해 살펴보고, 원하는 이벤트를 찾는 방법에 대해서도 알아본다.

---

1) addEventListener

 

예제에서 사용한 html 코드와 js 코드

 

이벤트 적용 모습

 

const title = document.querySelector(".container__contents");

function handTitleClick() {
	title.style.color = "tomato";
}

title.addEventListener("click", handTitleClick);

 

 

위 자바스크립트 코드를 활용하여 이벤트를 만들었다.

 

document 및 querySelector로 불러온 객체를 활용하여 이벤트 및 함수를 다룬다.

 

addEventListener 의 두 번째 파라미터에 함수명이 있는데, 원래 그 안에서 함수를 정의하여 사용하는 방법도 있지만

깔끔하게 나누기 위해 외부에 따로 정의했다.

 

---

2) Event 찾는 방법

 

 

1. MDN

 

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement#events

HTMLElement - Web APIs | MDN

 

위 사이트에 접속하고, 

 

각 page에 많은 정보가 있다.

 

각각의 page를 눌러보며 원하는 이벤트를 포함하여 다양한 객체들을 찾을 수 있다.

 

 

 

2. console.dir

 

 

console.dir(document)

위 코드를 콘솔창에 입력한다.

 

(또는, querySelector 등으로 찾은 객체를 넣어도 됨)

 

 

document 객체를 살펴보면,

 

on이 붙은 항목들이 event

 

앞에 on 이라고 붙어 있는 모든 것들이 Event 이다.

 

click, mouseleave, mouseenter 등, 아주 다양한 것들이 존재한다.

 

필요한 이벤트를 찾아서 사용하면 된다.

---

3) Window

 

 

위의 예시는 사용자가 Web Element에 관해 무언가를 할 때 발생하는 이벤트였지만, 브라우저 자체에 대한 이벤트도 존재한다. 

 

https://developer.mozilla.org/en-US/docs/Web/API/Window

Window - Web APIs | MDN

 

 

resize event

 

Window의 Event 중 하나인 resize를 예시로 실습해본다.

 

html 및 js 코드

 

 

browser를 resize 한 결과

 

창의 크기를 줄였더니 배경색이 변했다.

 

해당 코드는 아래와 같다.

 

function handleWindowResize() {
	document.body.style.backgroundColor = "tomato";
}

window.addEventListener("resize", handleWindowResize);

 

추가로, body나 head, title 과 같은 태그들은 document를 통해 바로 접근할 수 있다.

그 외의 태그들은 querySelector와 같은 메서드를 통해서만 접근 가능하다.

---

참고)

 

https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener

 

https://nomadcoders.co/javascript-for-beginners/lectures/2894

 

https://developer.mozilla.org/en-US/docs/Web/API/Window

 

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement#events