• 회원가입
  • 로그인
  • 구글아이디로 로그인

[Basic] JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★

목차

  1. 알아둘 용어
  2. HTML 이벤트(Events)
  3. 주요 HTML 이벤트 핸들러 (Event Handelers)
  4. JS로 할 수 있는 것들

 

알아둘 용어 

 

  • 이벤트 (Evnets) : 웹페이지에서 일어나는 어떤 행위나 움직임
  • 이벤트 핸들러 (Event handlers) : JS가 한 이벤트에 반응하도록 만든 장치

 

 

HTML 이벤트(Events)

 

HTML 이벤트(Events)란 것은 HTML 요소에 뭔가가 일어나는 걸 말함.

JS가 HTML 페이지에 사용될 때, JS는 이러한 이벤트에 반응할 수 있음.

 


1.

HTML (사용자/브라우저) 이벤트 대표적인 몇 가지 예를 들자면, 


  ① HTML 웹페이지가 로딩을 마침

  ② HTML input 요소에 뭔가 입력

  ③ HTML button 요소가 클릭됨



2.

지정 이벤트 발생 시, HTML 속성에 추가한 이벤트 제어 속성에 의해 지정 JS 코드가 실행됨. (이때, 이벤트 제어 속성은 따옴표로 묶어야 함. 큰따옴표든, 작은따옴표든 상관 없음.)


<HTML요소  이벤트속성='JS 코드'>  (O)

<HTML요소  이벤트속성="JS 코드"> (O)


[예제1] - 다른 요소에 결과값 띄우기

 

<button onclick="getElementById('hz').innerHTML=Date()">현재시간 보기</button>

<p id="hz"></p>


결과보기:  Thu Jan 08 2015 19:35:05 GMT+0900 (대한민국 표준시)  


[예제2] - 요소 자신에 결과값 띄우기


<button onclick="this.innerHTML=Date()">현재 시간 보기</button>


결과보기:  Thu Jan 08 2015 19:35:05 GMT+0900 (대한민국 표준시)  



3.

JS 코드는 여러 줄이 보통이라 JS 코드 함수를 별도로 작성해 호출함.


<button onclick="displayDate()">클릭</button>


<script>

function displayDate() {

    document.getElementById("hz").innerHTML = Date();

}

</script>


<p id="hz"></p>

 

결과보기


주요 HTML 이벤트 핸들러 (Event Handelers) 

  주요 이벤트 의미
 HTML 요소가 바뀌면 JS코드 실행.
 사용자가 HTML 요소를 클릭하면 JS코드 실행.
 사용자가 마우스커스를 요소 위에 올리면 JS코드 실행.
 사용자가 마우스 커서를 요소 바깥으로 옮기면 JS코드 실행.
 사용자가 키보드의 키를 치면 JS코드 실행.
 브라우저가 이 웹페이지의 로딩 마치면 JS코드 실행.
 사용자가 마우스 버튼을 누른 후 버튼이 올라올 때 JS코드 실행
 사용자가 마우스 버튼을 누를 때 JS코드 실행
그외도 여러가지가 있음. 나중에 설명 예정.

 

JS로 할 수 있는 것들

1. 이벤트 핸들러 (Event handelers)

 

사용자의 입력, 사용자의 행동, 브라우저의 움직임을 감지 및 확인할 때 사용.

 

  • 페이지가 로딩될 때마다 실행되어야 하는 것
  • 페이지가 닫힐 때마다 실행되어야 하는 것
  • 사용자가 버튼을 클릭할 때 실행되어야 하는 것
  • 사용자가 input 입력 상자에 데이터를 입력할 때 확인해야 하는 것
  •  ... 기타 등등

 


2. 이벤트 발생과 함께 JS가 작동하도록 하는 방법


  • HTML 이벤트 속성은 JS 코드를 바로 실행시킬 수 있음.
  • HTML 이벤트 속성은 JS 함수를 호출할 수 있음.
  • 자신만의 이벤트 핸들 함수를 HTML 요소에 심을 수 있음.
  • 이벤트가 보내지거나 작동되는 걸 막을 수 있음.
  •  ... 기타 등등

 


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

분류 제목
Basic JS - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
Basic JS - String Methods - JS문자열메서드
Basic JS - Number - JS숫자
Basic JS - Number Method - JS숫자메서드
Basic JS - Math 객체 - JS수학객체 (= JS산수객체 = Math객체 = Math Object = 매스 …
Basic JS - Dates - JS날짜
1/67
목록
찾아주셔서 감사합니다. Since 2012