728x90
- onclick: 요소가 클릭될 때 호출됨
- onmouseover: 마우스 포인터가 요소 위에 올라가 있을 때 호출됨
- onmouseout: 마우스 포인터가 요소를 벗어났을 때 호출됨
- onchange: 요소 값을 변경한 후 마우스 포인터가 요소를 벗어났을 때 호출됨
- onmouseup: 마우스 버튼이 눌린 상태가 아닐 때 호출됨
- onmousedown: 마우스 버튼이 눌려 있을 때 호출됨
onchange 예제
<html>
<head>
<meta charset="UTF-8">
<title>ex19</title>
<script>
function pwchk(){
inPut = document.getElementById("inPut").value;
document.getElementById("outPut").value=inPut;
document.getElementById("inPut").value = "";
}
</script>
</head>
<body>
<hr>
<input type="text" id="inPut" onchange="pwchk()"><br>
<input type="text" id='outPut'><br>
<hr>
</body>
</html>
onmousseup, onmousedown 예제
<html>
<head>
<meta charset="UTF-8">
<title>ex22</title>
<script>
function turnOn(obj) {
obj.src = "images/lighton.png";
document.getElementById("msg").innerHTML = "Unclick mouse and turn off!";
}
function turnOff(obj) {
obj.src = "images/lightoff.png";
document.getElementById("msg").innerHTML = "Click mouse and turn on!";
}
</script>
</head>
<body>
<img src="images/lightoff.png" width="50px" height="100px" id="lightOff" onmousedown="turnOn(this)" onmouseup="turnOff(this)"/><br>
<p id="msg">Click mouse and turn on!</p>
</body>
</html>
728x90
'Front-end' 카테고리의 다른 글
| [js] 자바 스크립트: alert, confirm, window.open(), window.close() (0) | 2022.05.02 |
|---|---|
| [js]자바 스크립트: window.history (0) | 2022.05.02 |
| [js]자바 스크립트: 연산자, 조건문, 반복문, 함수, 익명(무명) 함수, 오버로딩, onClick() (0) | 2022.04.29 |
| [css]position - static, relative, absolute, fixed (0) | 2022.04.28 |
| [css]박스 모델 (0) | 2022.04.27 |
