JavaScript 이벤트

HTML 이벤트는 HTML 요소에서 일어나는 '사건'입니다。

HTML 페이지에서 JavaScript를 사용할 때, JavaScript는 이러한 이벤트에 '대응'할 수 있습니다。

HTML 이벤트

HTML 이벤트는 브라우저나 사용자가 할 수 있는 몇 가지 행동입니다。

아래는 HTML 이벤트의 몇 가지 예제입니다：

  • HTML 웹 페이지가 로드됨
  • HTML 입력 필드가 변경됨
  • HTML 버튼이 클릭됨

일반적으로, 이벤트가 발생할 때 사용자는 무언가를 하고 싶어합니다.

JavaScript는 이벤트가 감지되었을 때 코드를 실행할 수 있습니다。

JavaScript 코드를 통해，HTML은 HTML 요소에 이벤트 처리기를 추가할 수 있습니다。

단 캡틸릿 문자를 사용하여：

<element event='일부 JavaScript>

쌍 캡틸릿 문자를 사용하여：

<element event="일부 JavaScript">

다음 예제에서는，onclick 속성（그리고 코드）가 추가되었습니다 <button> 요소：

예제

<button onclick='document.getElementById("demo").innerHTML=Date()'>지금의 시간은 무엇인가요?</button>

자신이 직접 시도해보세요

위 예제에서는 JavaScript 코드가 id="demo"의 요소의 내용을 변경했습니다。

다음 예제에서는 코드（사용 this.innerHTML）는 자신의 요소의 내용을 변경했습니다：

예제

<button onclick="this.innerHTML=Date()">지금의 시간은 무엇인가요?</button>

자신이 직접 시도해보세요

JavaScript 코드는 일반적으로 여러 줄로 구성됩니다. 이벤트 속성을 함수 호출하는 것이 더 일반적입니다：

예제

<button onclick="displayDate()">지금의 시간은 무엇인가요?</button>

자신이 직접 시도해보세요

일반적인 HTML 이벤트

아래는 일반적인 HTML 이벤트들입니다：

이벤트 설명
onchange HTML 요소가 변경되었습니다
onclick 사용자가 HTML 요소를 클릭했습니다
onmouseover 사용자가 HTML 요소에 마우스를 가져다둔 경우
onmouseout 사용자가 HTML 요소에서 마우스를 떠났을 때
onkeydown 사용자가 키보드 키를 누른 경우
onload 브라우저가 페이지 로드를 완료했습니다

더 완전한 목록:CodeW3C.com JavaScript 참조 설명서 HTML DOM 이벤트.

JavaScript가 할 수 있는 일

이벤트 처리기는 사용자 입력, 사용자 동작 및 브라우저 동작을 처리, 검증할 수 있습니다:

  • 페이지가 로드될 때 할 일
  • 페이지가 닫혀질 때 할 일
  • 사용자가 버튼을 클릭할 때 실행되어야 할 동작
  • 사용자가 입력한 데이터가 검증되어야 할 내용
  • etc.

JavaScript가 이벤트를 처리하는 다른 방법이 많이 있습니다:

  • HTML 이벤트 속성은 JavaScript 코드를 실행할 수 있습니다.
  • HTML 이벤트 속성은 JavaScript 함수를 호출할 수 있습니다.
  • 자신의 이벤트 처리 함수를 HTML 요소에 할당할 수 있습니다.
  • 이벤트가 전송되거나 처리되지 않도록 방지할 수 있습니다.
  • etc.

HTML DOM 장에서 이벤트와 이벤트 처리자에 대해 더 많이 배울 수 있습니다.