자바스크립트 HTML DOM 이벤트

HTML DOM은 자바스크립트가 HTML 이벤트에 반응하게 합니다:

Mouse Over Me
Click Me


이벤트에 반응하기

사용자가 HTML 요소를 클릭하는 것과 같은 이벤트가 발생할 때, 자바스크립트가 실행될 수 있습니다.

사용자가 요소를 클릭할 때 코드를 실행하려면, HTML 이벤트 속성(attribute)에 자바스크립트 코드를 추가하십시오:

HTML 이벤트 예:

  • 사용자가 마우스를 클릭할 때
  • 웹 페이지가 로드되었을 때
  • 이미지가 로드되었을 때
  • 마우스가 요소 위로 올려졌을 때
  • 입력 필드가 변경될 때
  • HTML 양식이 제출될 때
  • 사용자가 키를 칠 때

이 예제에서 <h1> 요소의 내용은, 사용자가 클릭하면, 변경됩니다:

Example

Click on this text!

이 예제에서 함수는 이벤트 핸들러(event handler)에서 호출됩니다:

Example

Click on this text!


HTML 이벤트 속성 (Event Attributes)

HTML 요소에 이벤트를 지정하기 위해, 이벤트 속성(event attributes)을 사용할 수 있습니다.

Example

버튼을 클릭하면 날짜(date)가 표시됩니다.

위의 예제에서 button을 클릭하면, displayDate라는 함수가 실행됩니다.


HTML DOM을 사용하여 이벤트 할당

JavaScript를 사용하여, HTML DOM으로 HTML 요소에 이벤트를 할당할 수 있습니다:

Example

“Try it”을 클릭하여 displayDate() 함수를 실행하십시오.

위 예제에서 displayDate라는 함수는 id="myBtn"인 HTML 요소에 할당됩니다.

버튼을 클릭하면 함수가 실행됩니다.


onload 및 onunload 이벤트

onload 및 onunload 이벤트는 사용자가 페이지에 들어가거나 페이지를 떠날 때 트리거됩니다.

onload 이벤트는, 방문자의 브라우저 유형(type)과 브라우저 버전을 확인하고, 그 정보를 기반으로 적절한 버전의 웹 페이지를 로드하는 데 사용할 수 있습니다.

onload 및 onunload 이벤트는 쿠키를 처리하기 위해 사용될 수 있습니다.

Example


onchange 이벤트

onchange 이벤트는 종종 입력 필드(input fields)의 유효성 검사와 함께 사용됩니다.

다음은 onchange 사용 방법의 예제입니다. 사용자가 입력 필드의 내용을 변경하면, upperCase() 함수가 호출됩니다.

Example

입력 필드를 벗어나면, 입력한 텍스트를 대문자로 변경하는 함수가 트리거됩니다.


onmouseover 및 onmouseout 이벤트

onmouseover 및 onmouseout 이벤트는, 사용자가 마우스를 HTML 요소 위로 올리거나, 마우스가 요소에서 벗어날 때, 함수를 트리거하는 데 사용할 수 있습니다:

Example

Mouse Over Me


onmousedown, onmouseup 및 onclick 이벤트

onmousedown, onmouseup 및 onclick 이벤트는 마우스 클릭의 모든 부분입니다. 먼저 마우스 버튼을 클릭하면 onmousedown 이벤트가 트리거되고, 마우스 버튼을 놓으면 onmouseup 이벤트가 트리거되고, 마지막으로 마우스 클릭이 완료되면 onclick 이벤트가 트리거됩니다.

Example

Click Me


추가 예제

onmousedown 및 onmouseup
사용자가 마우스 버튼을 누르고 있을 때 이미지를 변경합니다.

Example

마우스를 클릭하고 누르고 계십시오!

onload
페이지 로드가 끝나면 경고 상자를 표시합니다.

onfocus
입력 필드가 포커스를 받으면 배경색을 변경합니다.

Example

Enter your name:

입력 필드에 포커스를 하면, 배경색을 변경하는 함수가 트리거됩니다.

Mouse Events
요소 위로 커서를 가져 가면 요소의 색을 변경합니다.

Mouse over this text

Example

Mouse over this text


HTML DOM 이벤트 객체 참조

모든 HTML DOM 이벤트 목록은 HTML DOM Event Object Reference를 참조하십시오.

출처: JavaScript HTML DOM Events

댓글 남기기