목차
- Events에 반응
- HTML Event 속성들
- HTML DOM 사용해 Events 할당
- onload / onunload 이벤트속성
- onchange 이벤트속성
- onmouseover / onmouseout 이벤트속성
- onmousedown / onmouseup / onclick 이벤트 속성
- onfocus 이벤트속성
- Event 관련 주소
Events에 반응
※ HTML DOM 이용하면, JS가 이벤트에 반응 가능.
<style>
#hz {border:1px solid gray; padding:20px;"}
</style>
<div id="hz" onmouseover="hz1(this)" onmouseout="hz2(this)">여긴 어디?</div>
<script>
function hz1(obj) {
obj.innerHTML = "홈짱닷컴"
}
function hz2(obj) {
obj.innerHTML = "Homzzang.com"
}
</script>
결과보기
HTML Event 속성들
1. HTML Events 예제
- 사용자가 마우스 클릭할 때
- 웹 페이지가 로드되었을 때
- 이미지가 로드되었을 때
- 마우스가 요소 위로 이동할 때
- 입력 필드가 변경된 경우
- HTML 양식이 제출될 때
- 사용자가 키를 치는 경우
2. HTML Event 속성 경우, 'on'으로 시작함.
https://homzzang.com/b/js?sca=Event
- onclick - 사용자 클릭 이벤트
- onload - 웹페이지 로드 이벤트
- ...
[예제1] - onclick 이벤트 발생 시, 바로 문자열 변경.
<h2 onclick="this.innerHTML='Homzzang.com'">홈짱닷컴</h2>
결과보기
[예제2] - onclick 이벤트 발생 시, 함수 사용해 문자열 변경.
<h2 onclick="hz(this)">홈짱닷컴</h2>
<script>
function hz(id) {
id.innerHTML = "Homzzang.com";
}
</script>
결과보기
HTML DOM 사용해 Events 할당
on으로 시작하는 HTML Events 속성들을 사용.
[예제] - onclick 이벤트 발생 시, 날짜 표시하기.
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
document.getElementById("demo").innerHTML = Date();
}
</script>
<p id="demo"></p>
결과보기
※ 결과예: Fri Dec 17 2021 20:51:33 GMT+0900 (한국 표준시)
PS. 주의: Date() 적을 때, 대소문자 주의 !!
onload / onunload 이벤트속성
1.
2.
onload 이벤트는 방문자의 브라우저 종류/버전 확인 후, 해당 정보를 기반으로 웹페이지의 적절한 버전을 로드하는 데 사용 가능.
3.
onload / onunload 이벤트는 쿠키 처리하는 데 사용 가능.
[예제]
<body onload="checkCookies()">
<p id="demo"></p>
<script>
function checkCookies() {
var text = "";
if (navigator.cookieEnabled == true) {
text = "쿠키 사용 가능";
} else {
text = "쿠키 사용 불가";
}
document.getElementById("demo").innerHTML = text;
}
</script>
결과보기
onchange 이벤트속성
1.
onchange 속성 - 입력값 변동 이벤트
2.
입력 필드 유효성 검사해 원하는 형태의 입력값 받을 때 주로 사용.
[예제] - 입력값을 대문자로 자동 변환시키기.
도메인: <input type="text" id="host" onchange="upperCase()">
<script>
function upperCase() {
const x = document.getElementById("host");
x.value = x.value.toUpperCase();
}
</script>
결과보기
onmouseover / onmouseout 이벤트속성
[예제]
<style>
#hz {border:1px solid gray; padding:20px;"}
</style>
<div id="hz" onmouseover="hz1(this)" onmouseout="hz2(this)">여긴 어디?</div>
<script>
function hz1(obj) {
obj.innerHTML = "홈짱닷컴"
}
function hz2(obj) {
obj.innerHTML = "Homzzang.com"
}
</script>
결과보기
onmousedown / onmouseup / onclick 이벤트 속성
[예제]
<style>
div {background-color:tomato;padding:40px; color:white;"}
</style>
<div onmousedown="hz1(this)" onmouseup="hz2(this)">클릭</div>
<script>
function hz1(obj) {
obj.style.backgroundColor = "red";
obj.innerHTML = "홈짱닷컴";
}
function hz2(obj) {
obj.style.backgroundColor="blue";
obj.innerHTML="Homzzang.com";
}
</script>
결과보기
onfocus 이벤트속성
[예제]
<script>
function hz1(x) {
x.style.background = "yellow";
}
function hz2(x) {
x.style.background = "silver";
}
</script>
이름: <input type="text" onfocus="hz1(this)" onblur="hz2(this)">
결과보기
Event 관련 주소
Event 종류
https://homzzang.com/b/js?sca=Event
Event 객체 종류
https://homzzang.com/b/js?sca=Event+Object
