[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) 

JS로 할 수 있는 것들

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

 

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

 

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

 

---

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

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