• 회원가입
  • 로그인

[DOM] JS - Events - 이벤트

목차

  1. Events에 반응
  2. HTML Event 속성들
  3. HTML DOM 사용해 Events 할당
  4. onload / onunload 이벤트속성
  5. onchange 이벤트속성
  6. onmouseover / onmouseout 이벤트속성
  7. onmousedown / onmouseup / onclick 이벤트 속성
  8. onfocus 이벤트속성
  9. 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.

  • onload 속성 - 사용자가 웹페이지 진입
  • onunload 속성 - 사용자가 웹페이지 이탈

 

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 이벤트속성

 

  • 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 이벤트 속성

 

  • 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 이벤트속성

 

  • onfocus 속성 - 입력창에 커서 찍어 입력창 선택 이벤트.
  • onblur 속성 - 입력창에서 커서 해제 이벤트.

 


[예제]

 

<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

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

no_profile 디피씨평단14752원 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2021-12-17 (금) 18:21 7개월전
1만 써져있는건 지워진 것일까요?
주소
     
     
홈짱 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 2021-12-17 (금) 19:02 7개월전
아래 게시글 3번 참고해 주세요.
https://homzzang.com/b/help-65
주소
찾아주셔서 감사합니다. Since 2012