JavaScript 이벤트(Event)

JavaScript와 HTML 이벤트

JavaScript는 이러한 이벤트가 발생할 때 코드를 실행하는 데 사용될 수 있습니다. HTML에서는 이벤트 핸들러 속성을 HTML 요소에 추가할 수 있으며, 이를 통해 JavaScript 코드와 연결됩니다.

따옴표 사용

작은따옴표: <element event='some JavaScript'>
큰따옴표: <element event="some JavaScript">

onclick 이벤트의 예

요소의 내용 변경: <button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>
자체 요소의 콘텐츠 변경: <button onclick="this.innerHTML = Date()">The time is?</button>
함수 호출: <button onclick="displayDate()">The time is?</button>

 

일반적인 HTML 이벤트 목록

일반적으로 사용되는 HTML 이벤트는 다음과 같습니다.

onchange: HTML 요소가 변경됨
onclick: 사용자가 HTML 요소 클릭
onmouseover: 사용자가 HTML 요소 위로 마우스 이동
onmouseout: 사용자가 HTML 요소에서 마우스 이동
onkeydown: 사용자가 키보드 키 누름
onload: 브라우저가 페이지 로드 완료

자바스크립트 이벤트 핸들러

이벤트 처리기는 사용자 입력, 사용자 작업, 브라우저 작업을 처리하고 확인하는 데 사용할 수 있으며, 다음과 같은 다양한 작업을 수행할 수 있습니다.

페이지가 로드될 때마다 수행해야 하는 작업
페이지가 닫힐 때 해야 할 일
사용자가 버튼을 클릭할 때 수행해야 하는 작업
사용자가 데이터를 입력할 때 확인해야 하는 콘텐츠

JavaScript는 이벤트와 함께 작동하도록 하기 위해 다양한 방법을 사용할 수 있으며, 이에는 HTML 이벤트 속성을 사용하여 코드를 직접 실행하거나 함수를 호출하거나 자체 이벤트 핸들러 기능을 할당하는 방법 등이 있습니다.

정리

HTML 이벤트와 자바스크립트 이벤트 핸들러는 웹 개발에서 중요한 부분입니다. 이를 통해 사용자와 상호작용하고 웹 페이지의 동작을 제어할 수 있습니다. HTML DOM 장에서 이벤트 및 이벤트 핸들러에 대해 더 많이 배우게 될 것입니다.