Javascript event

이벤트 리스너 찾는법

1. 구글에 찾고 싶은 element의 이름 검색하기 ex) h1 html element mdn(mozilla developer network)
   그 중에서 web APIs 이 포함된 페이지 찾기 (JS 관점의 HTML heading element란 의미)

2. conslog.dir
   element를 console.dir로 출력해서 on~ 이라고 적혀있는걸 사용하면 됨.
   (사용할땐 on빼고 사용)

이벤트 리스너 사용법

// html element 불러오기
const title = document.querySelector(".hello")

// 실행시켜야 할 함수
function handleTitleClick () {
    console.log("it was clicked")
}

// click하면 handleTitleClick이라는 function이 동작하길 원함 그래서 handle~ 함수에 () 를 안넣은 것임
title.addEventListener("click", handleTitleClick)

자바스크립트 함수에서 괄호()는 자바스크립트가 실행시켜주기를 바라는것임
즉 이벤트 리스너에서 괄호를 넣지않는 이유는 클릭을 했을때 이벤트를 실행하기위해서임
function이 js에게 넘겨주고 유저가 title을 click할 경우에 js가 실행버튼을 대신 눌러주길 바라는 것임( 직접 handleTitleClick(); 이렇게 하는 것이 아니라)
함수에서 () 이 두 괄호를 추가함으로써 실행버튼을 누를 수 있는 거임

이벤트 리스너 사용법2

1. 첫번째는 위에서 보았던 addEventListener()를 사용하는 방법이고

const title = document.querySelector(".hello")
function handleTitleClick () {
    title.style.color = "red"
    console.log("클릭했음")
}
title.addEventListener("click", handleTitleClick)

addEventListener()를 사용하면 좋은점은 나중에
removeEventListener로 지울수 있다는 점이다.

2. 두번째는 oneventname을 사용하는 방법이다

const title = document.querySelector(".hello")
function handleTitleClick () {
    title.style.color = "red"
    console.log("클릭했음")
}
title.onclick = handleTitleClick;