목차
Javascript HTML DOM Events
- description : Javascript HTML DOM Events
- author : 오션
- email : shlim@repia.com
- lastupdate : 2021-04-20
Source of the article
HTML DOM을 사용하면 JavaScript가 HTML 이벤트에 반응할 수 있습니다:
Reacting to Events
사용자가 HTML 요소를 클릭 할 때와 같이 이벤트가 발생하면, JavaScript를 실행될 수 있습니다.
사용자가 요소를 클릭 할 때 코드를 실행하려면, HTML 이벤트 속성에 JavaScript 코드를 추가하십시오.
onclick=JavaScript
HTML 이벤트의 에시는 다음과 같습니다:
- 사용자가 마우스를 클릭 할 때
- 웹 페이지가 로딩 되었을 때
- 이미지가 로딩 되었을 때
- 마우스가 요소 위로 이동할 때
- 입력 필드가 변경된 경우
- HTML 양식을 제출할 때
- 사용자가 키를 입력할 때
다음 예제에서, 사용자가 클릭하면 <h1> 요소의 콘텐츠가 변경됩니다.
예제
<!DOCTYPE html> <html> <body> <h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1> </body> </html>
다음 예제에서는, 이벤트 핸들러(event handler)가 함수를 호출합니다:
예제
<!DOCTYPE html> <html> <body> <h1 onclick="changeText(this)">Click on this text!</h1> <script> function changeText(id) { id.innerHTML = "Je t'aime~~"; } </script> </body> </html>
HTML Event Attributes
HTML 요소에 이벤트를 할당하려면 이벤트 속성을 사용할 수 있습니다.
예제
버튼 요소에 onclick 이벤트를 할당합니다.
<!DOCTYPE html> <html> <body> <p>Click the button to display the date.</p> <button onclick="displayDate()">The time is?</button> <p id="demo"></p> <script> function displayDate() { document.getElementById("demo").innerHTML = Date(); } </script> </body> </html>
상기 예제에서, displayDate()함수는 버튼이 클릭되면 실행됩니다.
Assign Events Using the HTML DOM
HTML DOM을 사용하면 JavaScript를 사용하여 HTML 요소에 이벤트를 할당할 수 있습니다.
예제
버튼 요소에 onclick 이벤트를 할당합니다.
<script> document.getElementById("myBtn").onclick = displayDate; function displayDate() { document.getElementById("demo").innerHTML = Date(); } </script>
위의 예제에서 displayDate 함수는 id=“myBtn”를 가진 HTML 요소에 할당됩니다.
버튼을 클릭하면 함수가 실행됩니다.
The onload and onunload Events
onload 및 onunload 이벤트는 사용자가 페이지에 들어가거나 페이지를 떠날 때 작동됩니다.
onload 이벤트는 방문자의 브라우저 유형 및 브라우저 버전을 확인하고,
해당 정보를 기반으로 적절한 버전의 웹 페이지를 로딩하는 데 사용할 수 있습니다.
onload 및 onunload 이벤트를 사용하여 쿠키를 처리할 수 있습니다.
예제
<!DOCTYPE html> <html> <body onload="checkCookies()"> <p id="demo"></p> <script> function checkCookies() { var text = ""; if (navigator.cookieEnabled == true) { text = "Cookies are enabled."; } else { text = "Cookies are not enabled."; } document.getElementById("demo").innerHTML = text; } </script> </body> </html>
The onchange Event
onchange 이벤트는 종종 입력 필드의 유효성 검사와 결합하여 사용됩니다.
다음은 onchange를 사용하는 방법의 예제입니다. 사용자가 입력 필드의 내용을 변경하면 upperCase() 함수가 호출됩니다.
예제
<!DOCTYPE html> <html> <body> Enter your name: <input type="text" id="fname" onchange="myFunction()"> <p>When you leave the input field, a function is triggered which transforms the input text to upper case.</p> <script> function myFunction() { var x = document.getElementById("fname"); x.value = x.value.toUpperCase(); } </script> </body> </html>
The onmouseover and onmouseout Events
onmouseover 및 onmouseout 이벤트는 사용자가 HTML 요소 위로 마우스를 가져 가거나
HTML 요소에서 벗어날 때 함수를 작동시킬 때 사용할 수 있습니다.
<!DOCTYPE html> <html> <body> <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color: #D94A38; width:120px; height: 20px; padding:40px;">Mouse Over Me</div> <script> function mOver(obj) { obj.innerHTML = "Thank you" } function mOut(obj) { obj.innerHTML = "Mouse Over Me" } </script> </body> </html>
The onmousedown, onmouseup and onclick Events
onmousedown, onmouseup 및 onclick 이벤트는 모두 마우스 클릭의 일부입니다.
먼저 마우스 버튼을 클릭하면 onmousedown 이벤트가 작동되고,
마우스 버튼을 놓으면 onmouseup 이벤트가 작동되고
마지막으로 마우스 클릭이 완료되면, onclick 이벤트가 작동됩니다.
<!DOCTYPE html> <html> <body> <div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color: #D94A38; width:90px ; height:20px; padding:40px; color:white">Click Me</div> <script> function mDown(obj) { obj.style.backgroundColor = "#1ec5e5"; obj.innerHTML = "Release Me"; } function mUp(obj) { obj.style.backgroundColor = "#D94A38"; obj.innerHTML = "Merci"; } </script> </body> </html>
More Examples
onmousedown and onmouseup
사용자가 마우스 버튼을 누르고 있을 때 이미지를 변경합니다.
<!DOCTYPE html> <html> <body> <img src="bulboff.gif" alt="bulb" id="myimage" onmousedown="lighton()" onmouseup="lightoff()" width="100" height="180" /> <p>Click mouse and hold down!</p> <script> function lighton() { document.getElementById('myimage').src = "bulbon.gif"; } function lightoff() { document.getElementById('myimage').src = "bulboff.gif"; } </script> </body> </html>
onload
페이지 로딩이 완료되면 alert 상자를 표시합니다.
<!DOCTYPE html> <html> <body onload="mymessage()"> <script> function mymessage() { alert("This message was triggered from the onload event"); } </script> </body> </html>
onfocus
포커스를 받으면 입력 필드의 배경색을 변경합니다.
<!DOCTYPE html> <html> <body> Enter your name: <input type="text" onfocus="myFunction(this)"> <p>When the input field gets focus, a function is triggered which changes the background-color</p> <script> function myFunction(x) { x.style.background = "yellow"; } </script> </body> </html>
Mouse Events
커서를 요소 위로 이동하면 요소의 색상을 변경합니다.
<!DOCTYPE html> <html> <body> <h1 onmouseover="style.color='red'" onmouseout="style.color='black'">Mouse over this text</h1> </body> </html>
HTML DOM Event Object Reference
모든 HTML DOM 이벤트 목록은 HTML DOM Event Object Reference를 참조하세요.
