04. HTML과 JS의 만남 : 이벤트

 

이번에는 이벤트라는것을 알아 볼 텐데 , 이벤트는 자바스크립트가 사용자와 상호작용 하는데 핵심적인 역할을 합니다.

<input> 이라는 태그를 사용해보았는데 <input> 태그의 type을 "button"으로 지정하면 버튼 모양이 됩니다.

버튼에 글자를 넣고 싶으면 value 속성을 이용하면 됩니다.

 

<input> 태그에 onclick 이라는 속성을 썼는데 , 이 속성은 아주 특별한 속성입니다. HTML 설명서에는 "onclick 속성 값으로는 반드시 자바스크립트 코드가 와야합니다."라고 적혀 있습니다. 다음으로 "onclick 속성의 값은 웹 브라우저가 기억해 뒀다가, onclick 속성이 위치하고 있는 태그를 사용자가 클릭했을때 자바 스크립트 코드를 자바스크립트 문법에 따라 해석해서 웹 브라우저가 실행할 것 입니다" 라고 적혀 있었습니다.

그래서 'hi' 버튼을 클릭했을때 alert('hi') 라는 코드가 실행 되는 것을 알 수 있습니다.

 

이처럼 웹 브라우저 위에서 일어나는 일들을 사건 , 영어로는 이벤트 라고 합니다. 어떤 이벤트가 일어났을때 어떠한 자바 스크립트 코드를 실행하게 하는 것이 on click이라는 것 입니다.

---

내용이 변했을 때를 체크하는 이벤트도 있습니다. onchange라는 속성 입니다.

 

abc를 입력하고, 마우스 커서를 바깥쪽으로 빼서 클릭하면 웹 브라우저가 onchange 이벤트를 실행합니다.

---

만약 사용자가 어떤 키를 눌렀을때 이벤트가 발생하도록 만들고 싶다면 ? onkeydown 이라는 속성이 있습니다.