JavaScript 이벤트
HTML 이벤트는 HTML 요소에 발생하는 “동작“입니다.
HTML 페이지에서 JavaScript가 사용될 때, JavaScript는 이러한 이벤트에 “반응“할 수 있습니다.
HTML 이벤트
HTML 이벤트는 브라우저가 수행하는 작업일 수도 있고 사용자가 수행하는 작업일 수도 있습니다.
다음은 HTML 이벤트의 몇 가지 예입니다.
- HTML 웹 페이지 로드 완료
- HTML 입력 필드 변경
- HTML 버튼 클릭
종종, 이벤트가 발생할 때, 여러분은 무언가를 하고 싶을지도 모릅니다.
JavaScript를 사용하면 이벤트가 탐지될 때 코드를 실행할 수 있습니다.
JavaScript 코드로 작성된 이벤트 핸들러 속성을 HTML 요소에 추가할 수 있습니다.
작은 따옴표 사용:
<element event='JavaScript 코드'>
큰 따옴표 사용:
<element event="JavaScript 코드">
다음 예제에서는 onclick 속성(코드 포함)이 <button> 요소에 추가됩니다.
예제 1
<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>
위의 예에서 JavaScript 코드는 id=”discript”로 요소의 내용을 변경합니다.
다음 예제에서 코드는 자체 요소의 내용을 변경합니다(this.innerHTML 사용).
예제 2
<button onclick="this.innerHTML = Date()">The time is?</button>
자바스크립트 코드는 대부분 장문입니다. 함수를 호출하는 이벤트 속성을 사용하는 것이 더 일반적입니다.
예제 3
<button onclick="displayDate()">The time is?</button>
자주 사용되는 HTML 이벤트
| 이벤트 | 설명 |
| onchange | HTML 요소 변경 시 |
| onclick | 사용자가 HTML 요소를 클릭할 시 |
| onmouseover | 사용자가 HTML 요소 위로 마우스를 이동할 시 |
| onmouseout | 사용자가 HTML 요소 밖으로 마우스를 이동할 시 |
| onkeydown | 사용자가 키보드 키를 누를 시 |
| onload | 브라우저가 페이지 로드를 마쳤을 시 |
이벤트 핸들러
이벤트 핸들러를 사용하여 사용자 입력, 사용자 작업 및 브라우저 작업을 처리하고 확인할 수 있습니다.
- 페이지가 로드될 때마다 수행해야 하는 작업
- 페이지를 닫을 때 수행해야 하는 작업
- 사용자가 버튼을 클릭할 때 수행해야 하는 작업
- 사용자가 데이터를 입력할 때 확인해야 할 내용
- 기타 등등…
자바스크립트가 이벤트와 연동되도록 하기 위해 많은 다양한 방법을 사용할 수 있습니다.
- HTML 이벤트 속성은 JavaScript 코드를 직접 실행할 수 있습니다.
- HTML 이벤트 속성은 JavaScript 함수를 호출할 수 있습니다.
- HTML 요소에 자신의 이벤트 핸들러 기능을 할당할 수 있습니다.
- 이벤트를 전송하거나 처리하지 못하도록 할 수 있습니다.
- 기타 등등…