[JavaScript] Events 1

가볍게 정리하자면
js 파일이 존재하기 때문에 js 파일을 통해 HTML의 내용을 가져올 수 있다.
document가 HTML이 js 파일을 load 하기 때문에 존재하고, 그 다음에 브라우저는 우리가 document에 접근할 수 있게 해준다.

element의 내부를 보고싶다면

console.dir()

1. Event

console.dir()

위 코드는 기본적으로 object로 표시한 element를 보여준다. (전부 js object)
표시되는 element 중에서

onpointerout
onpointerenter
onpointermove
.
.
.

on이 붙은 많은 element들이 있는데 이것들이 바로

event
event란 무엇일까?
예를 들어, 내가 click을 하면 그게 event이다.
h1 위로 마우스가 올라가도 event.
입력을 끝내거나 이름을 적거나 enter를 눌러도 event이다.
이 모든 event들을 JavaScript는 listen 할 수 있다.

2. click을 listen 하는 방법

title.addEventListener("click")

코드를 구현해보자.

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

function handleTitleClick() {
	console.log("title was clicked!");
}

title.addEventListener("click", handleTitleClick);

handleTitleClick()

위 코드에서 function을 JavaScript에 넘겨주고, 유저가 title을 click 할 경우에 JavaScript가 실행버튼을 대신 눌러주길 바라는 것이다.
마지막줄 handleTitleClick()에서 괄호는 실행버튼을 누를 수 있는 것이다.

3. 스타일 넣기

버튼을 클릭했을 때 색깔이 변하는 등의 스타일 넣는 방법은 바로 다음이다.

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

function handleTitleClick() {
	title.style.color = "blue"
	console.log("title was clicked!");
}

title.addEventListener("click", handleTitleClick);

handleTitleClick()

밑에서 두 번 째 줄의 이 부분 handleTitleClick 에서는 뒤에 괄호를 넣어주면 안 돼. 왜냐하면 우리는 유저가 click을 할 경우에만 JavaScript가 대신 실행버튼을 눌러줘야 하니까! 그래서 마지막 줄에 괄호를 작성하는 것이다.