[21.09.13] exam15(JavaScript) - 이벤트 처리, 종류
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function sum(x, y){ // 함수 생성
return x+y;
}
function printResult() {
var result = sum(10, 20);
// span 태그 얻어오기 --> id가 question인 태그 가져오기
var myTag = document.getElementById("question");
// alert(myTag); - 주소값이 나옴
// alert(myTag.tagName); // 명령을 치면 이 안에 있는 태그를 꺼내달라
//myTag.innerText = result;
myTag.innerHTML = "<font color='red'>" + result + "</font>";
}
</script>
</head>
<body>
<h1>10 + 50 = <span id="question" style="border: 1px solid red;">?</span></h1>
<!-- button 클릭 시 JavaScript의 printResult() 호출 -->
<input type="button" value="결과보기" onclick="javascript:printResult()" />
</body>
</html>
<!--
이벤트 처리
- 특정한 상황이 발생했을 때, 사용자가 정의하는 특정한 동작(함수)들을 호출되도록 하는 것.
- Javascript를 사용하는 이유는 <body> 안의 어떠한 태그를 사용자의 이벤트에 반응하도록 제어하기 위함이다.
(1) 이벤트 종류
1. onBlur - 문서나 윈도우, 프레임세트, 폼 요소에서 현재 입력 포커스가 사라질 때
2. onClick - 링크, 이미지맵 영역, 폼 요소가 클릭되었을 때
3. onFocus - 문서나 윈도우, 프레임세트, 폼 요소에서 현재 입력 포커스가 놓였을 때
4. onLoad - 이미지, 문서, 프레임이 로드될 때
5. onMouseOver - 태그의 요소 위로 마우스 커서가 들어갈 때
6. onMouseOut - 태그의 요소 위에서 마우스 커서가 빠져나갈 때
(2) 제어대상 지정
- 태그의 id로 제어할 특정 태그를 지정한다.
document.getElementById("아이디") 로 자바스크립트로 태그를 가져온다.
span태그는 inline
- width, height X (들어오는 글자에 따라 크기가 달라진다)
-->
