JavaScript HTML DOM 이벤트
- 이전 페이지 DOM 애니메이션
- 다음 페이지 DOM 이벤트 리스너
HTML DOM은 JavaScript가 HTML 이벤트에 반응할 수 있도록 허용합니다:
이벤트에 반응하기
JavaScript는 이벤트가 발생할 때 코드를 실행할 수 있습니다. 예를 들어, 사용자가 특정 HTML 요소를 클릭할 때.
사용자가 요소를 클릭할 때 코드를 실행하려면, HTML 이벤트 속성에 JavaScript 코드를 추가하세요:
onclick=JavaScript
HTML 이벤트 예제:
- 마우스를 클릭할 때
- 웹 페이지가 로드된 후
- 이미지가 로드된 후
- 마우스가 요소 위에 있을 때
- 입력 필드가 변경될 때
- HTML 형식이 제출될 때
- 사용자가 키를 누를 때
이 예제에서는 사용자가 <h1> 을 클릭할 때, 그 내용이 변경됩니다:
예제
<!DOCTYPE html> <html> <body> <h1 onclick="this.innerHTML = 'Hello!'">이 텍스트를 클릭하세요!</h1> </body> </html>
이 예제에서는 이벤트 처리기에서 함수를 호출합니다:
예제
<!DOCTYPE html>
<html>
<body>
<h1 onclick="changeText(this)">이 텍스트를 클릭하세요!</h1>
<script>
function changeText(id) {
id.innerHTML = "Hello:)";
}
</script>
</body>
</html>
HTML 이벤트 속성
HTML 요소에 이벤트를 할당하려면, 이벤트 속성을 사용할 수 있습니다.
예제
button 요소에 할당 onclick 이벤트:
<button onclick="displayDate()">시도해보세요</button>
이 예제에서는 displayDate라는 함수가 버튼이 클릭될 때 실행됩니다.
HTML DOM으로 이벤트 할당
HTML DOM은 JavaScript를 사용하여 HTML 요소에 이벤트를 할당할 수 있습니다:
예제
button 요소에 onclick 이벤트:
<script>
document.getElementById("myBtn").onclick = displayDate;
</script>
이 예제에서는 id="myBtn"의 HTML 요소에 displayDate라는 함수가 할당되었습니다.
버튼을 클릭할 때 함수가 실행됩니다.
onload 과 onunload 이벤트
사용자가 페이지에 진입하거나 페이지를 벗어날 때, onload 그리고 onunload 이벤트.
onload 이벤트는 방문자의 브라우저 유형과 브라우저 버전을 검사하고, 이 정보를 기반으로 웹 페이지의 적절한 버전을 로드할 수 있습니다.
onload 그리고 onunload 이벤트는 쿠키를 처리하는 데 사용될 수 있습니다.
예제
<body onload="checkCookies()">
onchange 이벤트
onchange 이벤트는 입력 필드��확인과 함께 사용되는 경우가 많습니다.
이벤트를 사용하는 방법 onchange 의 예제. 사용자가 입력 필드의 내용을 변경할 때 upperCase() 함수가 호출됩니다.
예제
<input type="text" id="fname" onchange="upperCase()">
onmouseover 과 onmouseout 이벤트
onmouseover 그리고 onmouseout 이벤트는 사용자가 HTML 요소에 마우스를 가져가거나 떠났을 때 특정 함수를 트리거하는 데 사용할 수 있습니다:
onmousedown, onmouseup 및 onclick 이벤트
onmousedown, onmouseup 그리고 onclick 이벤트는 전체 마우스 클릭 이벤트를 구성합니다。
먼저 마우스 버튼이 클릭될 때,onmousedown 이벤트가 트리거되고, 마우스 버튼이 떠났을 때,onmouseup 이벤트가 트리거되고, 마우스 클릭이 완료되면 마지막으로,onclick 이벤트가 트리거됩니다。
더 많은 예제
- onmousedown과 onmouseup
- 사용자가 마우스 버튼을 누를 때 이미지를 변경합니다.
- onload
- 페이지가 완전히 로드되면 경고 상자를 표시합니다.
- onfocus
- 입력 필드에 포커스를 얻을 때 배경색을 변경합니다.
- 마우스 이벤트
- 포인터가 요소에 이동할 때 그 색상을 변경합니다.
HTML DOM 이벤트 객체 참조 가이드
모든 HTML DOM 이벤트 목록을 확인하려면, 우리의 완전한 HTML DOM 이벤트 객체 참조 가이드。
- 이전 페이지 DOM 애니메이션
- 다음 페이지 DOM 이벤트 리스너
