조회수 확인


JavaScript HTML DOM Events

 HTML DOM은 HTML 이벤트의 반응을 자바스크립트에게 허용합니다.




1. Reacting to Events

 자바스크립트는 이벤트가 발생할 때 실행되어 질 수 있습니다, 마치 사용자가 HTML 요소를 클릭 했을 때 처럼 말이죠.


 사용자가 요소를 클릭 했을 때 코드를 실행시키기 위해, HTML 이벤트 속성에 자바스크립트 코드를 추가해주시면 됩니다.




onclick=JavaScript


 HTML 이벤트의 예제:

  - 사용자가 마우스로 클릭 했을 때

  - 웹 페이지가 로드 되었을 때

  - 이미지가 로드 되었을 때

  - 마우스가 요소의 위에 올라갔을 때

  - 입력 필드가 변경 되었을 때

  - HTML 서식이 제출 되었을 때



 아래 예제의 텍스트를 클릭하면 텍스트가 바뀝니다:



Click on this Text!





 코드:

 



1
2
 
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>
cs

 








2. HTML Event Attributes

 이벤트 속성을 사용하여 HTML 요소의 이벤트를 할당 할 수 있습니다. 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
    <body>
 
    <p>Click the button to display the date.</p>
 
    <button onclick="displayDate()">The time is?</button>
 
<script>
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}
</script>
 
    <p id="demo"></p>
 
    </body>
</html
 
cs




 



 







3. Assign Events Using the HTML DOM

 button 요소에 onclick 이벤트를 할당하는 예제입니다:



1
2
3
4
 
<script>
document.getElementById("myBtn").onclick = function(){ displayDate() };
</script>
cs
 









4. The onload and onunload Events

 onload와 onunload 이벤트는 사용자가 페이지에 들어오거나 나갈 때 발생하는 이벤트 입니다.


 onload 이벤트는 방문자의 브라우저 타입이나 브라우저 버전, 정보를 기반으로 웹 페이지의 적당한 버전을 로드를 검사하는데 사용됩니다.


 onload 와 onunload 이벤트는 쿠키와 함께 사용 되어 집니다:


1
2
<body onload="checkCookies()">
 
cs





 


5. The onchange Event

 onchange 이벤트는 입력 필드의 검사와 혼합되어 사용됩니다.


 아래 예제에서 upperCase() 함수는 입력 필드가 사용자에 의해 변경되어 질 때, 호출됩니다.


1
2
3
 
<input type="text" id="fname" onchange="upperCase()">
 
cs
 







6.The onmouseover and onmouseout Events

 onmouseover와 onmouseout 이벤트는 사용자의 마우스가 요소에 올라 갔다가, 나갈 때 발생하는 이벤트입니다.




1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<!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
 
cs

 










7. The onmousedown, onmouseup and onclick Events

 onmousedown, onmouseup, onclick 이벤트는 마우스 클릭의 모든 부분입니다. 


 onmousedown은 마우스 버튼이 클릭 되었을 때, 발생합니다.

 

 onmouseup은 마우스 버튼이 클릭 되었다가 풀릴 때, 발생합니다.



다른 카테고리의 글 목록

Web/JavaScript 카테고리의 포스트를 톺아봅니다