Event

• Event : 어떤 사건을 발생시키는 것
• Event type : 이벤트의 종류를 나타내는 문자열
• Event handler : 어떤 사건에 대한 동작을 다룸

EventTarget.addEventListener('eventType', function, useCapture);
이벤트 타깃                    이벤트 타입, 이벤트 핸들러, 캡쳐 사용 여부

addEventListener()

: 지정한 유형의 이벤트를 대상이 수신할 때마다 호출할 함수를 설정

예시1 : 클릭 시 콘솔에 문자열 출력

document.getElementById("btn").addEventListener("click",function(){
	console.log("click!");
});
//id가 btn인 버튼을 click하면 콘솔에 click!이 출력됨

예시2 : 보이지 않던 div 보이게 하기

[css]
.bar{
	~내용~
}

.newbar{
	~내용~
    display: none; /*화면에 보이지 않음*/
}

[javascript]
document.querySelector('.bar').addEventListener("click",function(){
    document.querySelector('.newbar').style.display="block"; //display="block" 화면에 보이게 하기
    document.querySelector('.newbar').style.width="400px"; //width 설정
});

Scroll 이벤트

• scrollHeight : 전체 부분
• scrollTop : 현재 스크롤 위치(높이)
• clientHeight : 스크롤에서 보여지는 부분

전체 페이지 scroll 이벤트

• window.addEventListener("scroll", function(){});

타이머 함수

: 일정시간 후에 함수가 호출되도록 하는 법

setTimeout

setTimeout(타이머가 만료된 후에 호출될 콜백함수 or 문자열, 시간)

setInterval

: 일정한 시간 간격을 두고 반복해서 실행하고 싶은 경우
setInterval(타이머가 만료된 후에 호출될 콜백함수 or 문자열, 시간)

+) 1000 = 1초