[JS]02. JavaScript on the Browser 2

03. Events

- event : 사용자가 입력을 하거나, enter를 누르는 등의 행위 

-> JS는 모든 event를 listen 할 수 있음 

 

* addEventListener() : JS에서 event를 listen할 수 있게 하는 함수 

- 무슨 event를 listen할 것인지 알려줘야 함

- removeEventListener를 통해 event listener 제거 가능

const title = document.querySelector(".hello h1");

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

title.addEventListener("click", handleTitleClick)
	// 사용자가 title을 click할 때(event 발생), handleTitleClick 함수 실행
    // addEventListener()를 통해 event를 listen할 수 있게 함

Click Event가 되자 handleTitleClick 실행

 

** event 종류 찾는 법 

1. MDN 검색 결과에서 Web APIs 가 적혀있는 페이지 확인하기 

2. element를 출력한 console 화면에서 "on~"으로 시작하는 object 찾기 

-> event를 사용할 때는 "on"을 제거하여 사용 

onabort -> abort로 사용

<cf> mouseenter : 마우스가 해당 요소 위에 올려져 있을 때 발생하는 event

const title = document.querySelector(".hello h1");


function handleMouseEnter() {
    console.log("mouse is here!");
}

title.addEventListener("mouseenter", handleTitleClick)
title.onmouseenter = handleTitleClick; // 동일한 기능

handleMouseEnter 실행

 

<cf> window 관련 event 

- resize : window의 크기를 바꿀 때 발생 

function handleWindowResize() {
    document.body.style.backgroundColor = "tomato";
    // body, head, title 등은 해당 명령문 형태가 가능하지만, 
    // div 등의 요소는 querySelector, getElementById로 불러와야 함
}

window.addEventListener("resize", handleWindowResize)