이벤트 | Notion

자바스크립트로 다양한 행동들을 지정할 수 있게 만드는 것을 이벤트라고 한다.

대개 웹페이지에서 클릭, 스크롤과 같은 구동되는 요소를 만들기위해 이벤트를 사용한다.

const btn = document.querySelector('#btn');

// 이벤트 핸들링 (Event Handling)
btn.onclick = function () { // 이벤트 핸들러(Event Handler)
	console.log('Hello World!')
}

위 코드는 버튼이라는 요소를 클릭했을때 console 이란 메소드를 이용해 문자열을 출력하는 이벤트를

담은 코드다.

위와 같이 이벤트를 담당하는 onclick 이라는 속성은 이벤트 핸들링이라 표현하고

그 안에 함수로 지정되어있는 것을 이벤트 핸들러라 표현한다.

JS파일에서 이벤트를 사용하지만 HTML 문서안에서도 이벤트를 실행시킬수 있다.

<body>
	<button id="myBtn" onclick="console.log('Hello World!')"></button>
</body>

onclick 이라는 속성을 이용해 js파일에 있는것처럼 가동은 하나

코드의 구조상 좋지못한 코드다. HTML 문서가 커지면 커질수록 오류가 날 가능성도 크고

코드의 구조상으로 좋지 못한 코드이기에 구분에서 HTML은 구조를 JS파일에는 동적인코드를 작성하는 것이

올바른 코드임을 확인하고 작성해야한다.

이벤트의 종류는 워낙많고 다양하기에 잘 선택해서 사용하면 된다.