자바스크립트 이벤트 JavaScript Events

자바스크립트의 이벤트에 대해 알아봅니다.

 

HTML 페이지에 자바스크립트 코드가 사용되는 것은 모두 알고 있는 사실입니다. HTML 페이지에서 HTML 이벤트가 발생했을 때 이러한 이벤트에 자바스크립트가 반응할 수 있습니다.

예를 들어, HTML 페이지의 버튼을 사용자가 클릭한다던지, 마우스를 갖다 대거나 또는 페이지가 로딩을 끝났을 때 여러 상황에서 자바스크립트 이벤트가 반응하여 HTML 요소를 변경하거나 추가하거나 삭제하는 등의 묘기를 부릴 수 있습니다.

 

아래의 예문을 잠시 살펴봅니다.

아래는 날짜 확인 클릭 버튼입니다. 버튼을 클릭 시 현재 날짜와 시간을 나타내는 Date( ) 메소드의 값이 아이디 값이 test인 innerHTML, 즉 콘텐츠 부분에 표시되도록 할당한 것입니다. onclick 이벤트는 클릭 시 트리거가 됩니다.

<button onclick="document.getElementById('test').innerHTML = Date()">날짜 확인 클릭</button>

반응형

onclick 이벤트 자체에 자바스크립트 함수를 할당하면 더욱 간결해집니다.

<button onclick="showDate()">날짜 확인 클릭</button>

<script>
function showDate() {
  document.getElementById("test").innerHTML = Date();
}
</script>

this 키워드를 사용하면, 현재 해당 HTML 콘텐츠에 변화가 생기게 됩니다. 아래와 같이 버튼을 클릭하면, 해당 버튼 HMTL 요소가 날짜를 보여주는 내용을 바뀌겠죠?

<button onclick="this.innerHTML = Date()">날짜 확인 클릭</button>

 

그럼 자주 사용되는 HTML 이벤트에는 어떤 것이 있을까요? 

아래는 자주 사용되는 이벤트를 모아 놓은 것입니다. 어떠한 경우에 해당 이벤트가 트리거되는지 기억하시기 바랍니다.

onchange	HTML 요소가 변할 경우
onclick	사용자가 HTML 요소를 클릭하는 경우
onmouseover	사용자가 HTML 요소에 마우스를 갖다대는 경우
onmouseout	사용자가 HTML 요소에 마우스를 떼는 경우
onkeydown	사용자가 키보드를 입력하는 경우
onload	브라우저에서 HTML 페이지 로딩을 끝내는 경우

사실 무수히 많은 이벤트가 있는데, 필요시마다 찾아 사용하는 것이 좋습니다.

 

더욱 자세한 이벤트는 아래에서 확인하세요!

https://en.wikipedia.org/wiki/DOM_events 

DOM events - Wikipedia