이벤트는 자바스크립트가 사용자와 상호작용하는 데 핵심적인 역할을 한다.
...생략...
<body>
<input type="button" value="hi" onclick="alert('hi')">
</body>
...생략...
<input> 태그에 onclick이라는 속성을 썼는데, 이 속성은 아주 특별한 속성이다.
HTML 설명서에는 "onclick 속성 값으로는 반드시 자바스크립트 코드가 와야 합니다"라고 적혀있다.
다음으로, "onclick 속성의 값은 웹 브라우저가 기억해 뒀다가, onclick 속성이 위치하고 있는 태그를 사용자가 클릭했을 때 자바스크립트 코드를 자바스크립트 문법에 따라 해석해서 웹 브라우저가 실행할 것입니다."라고 적혀있다.
그래서 'hi' 버튼을 클릭했을 때 alert('hi')라는 코드가 실행되는 것을 알 수 있다.
이처럼 웹 브라우저 위에서 일어나는 일들을 사건, 영어로는 이벤트(event)라고 한다.
...생략...
<body>
<input type="button" value="hi" onclick="alert('hi')">
<input type="text" onchange="alert('changed')" />
<input type="text" onkeydown="alert('keydown')" />
</body>
...생략...
여러 이벤트를 사용한 결과다.
내용이 변했을 때를 체크하는 이벤트는 onchange이다.
키보드의 키를 누르는 것을 감지하는 이벤트는 onkeydown이다.
사용자가 어떤 키를 눌렀을 때 이벤트가 발생하도록 만들고 싶다면
예) 'javascript keydown event attribute'로 검색하는 것을 추천한다.
위 글은 「생활코딩! HTML+ CSS + 자바스크립트」의 내용을 참고하여 작성한 글입니다.
'WEB > JavaScript' 카테고리의 다른 글
| Open API 활용 (0) | 2021.05.02 |
|---|---|
| 라이브러리 & 프레임워크 (0) | 2021.01.27 |
| 웹 브라우저 제어 (0) | 2020.11.08 |
| 콘솔 (0) | 2020.11.05 |
| JavaScript 시작, <script> 태그 (0) | 2020.11.05 |