이벤트 바인딩

바인딩: 연결하다 / 묶다 

웹페이지 접속 시에 HTML 문서가 로드될때, javascript에 작성된 대로 요소와 이벤트를 연결하는 것을 '이벤트 바인딩' 이라고 한다.

브라우저는 요소와 이벤트를 바인딩하고 있다가 사용자가 요청하는 순간에 이벤트를 발동한다.

*여기서 요청이라고 하면 '클릭, 마우스 엔터, 스크롤 등..'을 의미한다.

 

이벤트를 바인딩하는 방법에는 3가지가 있다.

1. HTML 이벤트 핸들러

HTML 요소의 속성값으로 이벤트를 바인딩하는 방법이다.

<button id="btn" onclick="doSomething()">클릭</button>

버튼을 클릭하면 dosomething() 이라는 이벤트가 발동하도록 이벤트를 바인딩한 것이다.

HTML 문서에 javascript 코드를 작성하는 것은 보안 또는 다양한 이유에서 권장되지 않는 방법이다.

 

 

2. DOM 이벤트 핸들러

요소에 이벤트를 바로 바인딩하는 방법이다.

const btn = document.getElementById('btn')
btn.onclick = () => {
	// 발동되는 내용 작성
}