코딩 이야기
이벤트 처리 본문
728x90
onclick 이벤트
라디오 버튼요소에 onclick이벤트를 설정하여 배경색을 바꿔보기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
function changeColor(c) {
document.getElementById("target").style.backgroundColor = c;
}
</script>
</head>
<body id="target">
<form>
<input type="radio" name="C1" value="v1" onclick="changeColor('lightblue')">파랑색
<input type="radio" name="C1" value="v2" onclick="changeColor('lightgreen')">녹색
</form>
</body>
</html>
onload와 onunload 이벤트
사용자가 웹 페이지에 진입하거나 웹 페이지를 떠나면 각각 onload와 onunload이벤트가 발생된다.
onload 이벤트를 이용하면 방문자의 브라우저 종류나 브라우저 버전을 알 수 있어서 적절한 버전의 웹 페이지르 로드할 수 있다. onload와 onunload이벤트는 쿠키를 처리하는데도 사용될 수 있다.
페이지가 로드되면 경고 대화상자를 뛰우고 페이지의 배경색을 빨간색으로 변경해보자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function onLoadDoc()
{
alert("문서가 로드되었습니다.")
document.body.style.backgroundColor = "red";
}
</script>
</head>
<body onload="onLoadDoc()";></body>
</html>
onchange 이벤트
입력 필드를 검증할 때 종종 사용된다. 다음 예제에서 사용자가 입력 필드의 내용을 변경하면 uuperCase()함수가 호출됨
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function sub(){
var x= document.getElementById("name");
x.value = x.value.toLowercase();
}
</script>
</head>
<body>
영어단어 : <input type="text" id="name" onchange="sub()">
<p>입력필드를 벗어나면 소문자로 변경됩니다.</p>
</body>
</html>
onmouseover 이벤트
onmouseover와 onmouseout 이벤트는 사용자가 HTML 요소 위에 마우스를 올리거나 요소를 떠날 때 발생된다.
간단한 예제를 작성하여 보면 다음과 같다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function OnMouseIn(elem)
{
elem.style.border ="2px solid red";
}
function OnMouseOut(elem){
elem.style.border = "";
}
</script>
</head>
<body>
<div style="background-color: yellow; width: 200px"
onmouseover="OnMouseIn (this)" onmouseout="OnMouseOut (this)">
마우스를 이 요소 위에 이동하세요.
</div>
</body>
</html>
onmousedown, onmouseup,onclick이벤트는 모두 마우스 클릭과 관련된 이벤트이다 먼저 마우스 버튼이 클릭되면 onmousedown 이벤트가 발생한다. 이어서 마우스 버튼이 떼어지면 onmouseup 이벤트가 발생하고 마지막으로 마우스 클릭이 완료되면서 onclick 이벤트가 발생한다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function OnButtonDown(button){
button.style.color = "#ff0000";
}
function OnButtonUp (button) {
button.style.color = "##00000";
}
</script>
</head>
<body>
<button onmousedown="OnButtonDown(this)" onmouseup="OnButtonUp(this)">눌러보세요!</button>
</body>
</html>
728x90
'JAVA스크립트' 카테고리의 다른 글
| form 유효성 검증 (0) | 2023.01.20 |
|---|---|
| form 요소에 접근하는 자바스크립트 (0) | 2023.01.19 |
| BOM(브라우저 객체 모델) (0) | 2023.01.19 |
| 아이디 비밀번호 (0) | 2023.01.18 |
| for in (0) | 2023.01.18 |
Comments