물체의 상태 변화를 현상이라고 한다. 이벤트 . HTML에는 사용자나 브라우저가 일부 활동을 수행함을 나타내는 다양한 이벤트가 있습니다. 언제 자바스크립트 코드는 HTML에 포함되어 있으며 js는 이러한 이벤트에 반응하여 실행을 허용합니다. 사건에 대한 이러한 반응 과정을 이벤트 처리 . 따라서 js는 다음을 통해 HTML 이벤트를 처리합니다. 이벤트 핸들러 .
예를 들어 , 사용자가 브라우저를 클릭하면 이벤트에서 수행할 작업을 실행하는 js 코드를 추가합니다.
일부 HTML 이벤트 및 해당 이벤트 핸들러는 다음과 같습니다.
마우스 이벤트:
| 수행된 이벤트 | 이벤트 핸들러 | 설명 |
|---|---|---|
| 딸깍 하는 소리 | 클릭하면 | 요소를 마우스로 클릭하면 |
| 마우스 오버 | 마우스 오버 시 | 마우스 커서가 요소 위에 올 때 |
| 마우스 아웃 | 마우스아웃 | 마우스 커서가 요소를 떠날 때 |
| 마우스 다운 | 마우스다운 | 요소 위에서 마우스 버튼을 눌렀을 때 |
| 마우스 업 | 온마우스업 | 요소 위에서 마우스 버튼을 놓으면 |
| 마우스 이동 | onmousemove | 마우스 움직임이 발생할 때. |
키보드 이벤트:
| 수행된 이벤트 | 이벤트 핸들러 | 설명 |
|---|---|---|
| 키다운 및 키업 | 온키다운 & 온키업 | 사용자가 키를 눌렀다가 놓으면 |
양식 이벤트:
| 수행된 이벤트 | 이벤트 핸들러 | 설명 |
|---|---|---|
| 집중하다 | 집중하다 | 사용자가 요소에 집중할 때 |
| 제출하다 | 제출시 | 사용자가 양식을 제출할 때 |
| 흐림 | 흐리게 하다 | 초점이 양식 요소에서 벗어날 때 |
| 변화 | 변경시 | 사용자가 양식 요소의 값을 수정하거나 변경하는 경우 |
창/문서 이벤트
| 수행된 이벤트 | 이벤트 핸들러 | 설명 |
|---|---|---|
| 짐 | 길 위에 | 브라우저가 페이지 로딩을 완료하면 |
| 부리다 | 언로드시 | 방문자가 현재 웹페이지를 떠나면 브라우저는 이를 언로드합니다. |
| 크기 조정 | 크기 조정 | 방문자가 브라우저 창의 크기를 조정할 때 |
이벤트와 해당 핸들러에 대한 몇 가지 예를 살펴보겠습니다.
클릭 이벤트
Javascript Events지금 테스트해보세요
마우스오버 이벤트
<p onmouseover="mouseoverevent()"> Keep cursor over me</p>지금 테스트해보세요
포커스 이벤트
Javascript Events <h2> Enter something here</h2>지금 테스트해보세요
키다운 이벤트
Javascript Events <h2> Enter something here</h2>지금 테스트해보세요
이벤트 로드
Javascript Events <br>지금 테스트해보세요