04 HTML과 JS의 만남 : 이벤트

1.

이벤트 란?

 

자바스크립트가 사용자와 상호작용 하는데 핵심적인 역할을 한다.

 

이벤트 == event.

 

말 그대로, 어떤 사건이 일어났을 때, 사용자와 상호작용이 되는 ~

 

2.

예시)

 

 

 

<input> 태그를 사용해서,

이 태그의 type을 button으로 지정하면,

버튼 모양으로 된다.

 

그리고, 버튼에 글자를 넣고 싶으면, value 라는 속성을 사용 하면 된다.

 

3.

여기서, 이제 이 버튼을 클릭했을 때,

경고창이 뜨도록 하고 싶으면 어떻게 해야할까 ?

 

경고창은 alert() 라는 기능을 사용 하면 된다.

 

 

 

4.

여기서 짚고 넘어가야할 개념이 있다.

 

<input> 태그 내부에 onclick 이라는 속성을 사용했는데,

이 onclick 이라는 속성은 반드시 속성값으로

 

자바스크립트 코드가 와야 한다고 HTML 설명서에 명시 되어 있다.

 

( 자바스크립트 첫 게시물에 정리했던 내용 이다. )

 

즉,

onclick 속성의 값인 alert('안녕 !') 을 기억해뒀다가,

 

사용자가 버튼을 클릭 하면, 그때 실행이 되는 것이다.

 

이렇게 웹 브라우저 위에서 일어나는 일들을

 

사건, 영어로는 이벤트(event) 라고 한다.

 

>>

 

어떤 이벤트가 일어났을 때 어떠한 자바스크립트 코드를 실행하게 하는 것 == onclick

 

5.

이러한 이벤트는 onclick (속성) 을 했을 때만 있을까 ?

 

당연히 아니다.

 

여러 종류의 이벤트가 존재 하고,

 

input 태그 내부에 type 속성을 button 이 아니라, text 로 바꿔 볼 수도 있다.

 

 

 

이렇게 글자를 입력하면, 내용이 변화 된다.

 

이러한 내용이 변했을 때를 체크 해주는 이벤트도 존재 한다.

 

onchange 라는 속성 이다.

 

onchange라는 속성이 바로 onclick 과 같은 이벤트 류 속성 이다.

 

onchange 속성은 text로 입력받는 input 태그에 해당하는 공간에서,

텍스트를 입력하고 마우스를 외부로 빼서 아무 곳이나 클릭하면,

onchange 이벤트를 실행 한다.

 

 

 

만약에 텍스트 영역 내부에 사용자가 입력한 텍스트의 내용이 동일하다면,

onchange 이벤트는 일어나지 않는다.

 

6.

그러면,

사용자가 어떤 키를 아무거나 입력 했을 때,

바로 이벤트가 발생하도록 할 수는 없을까 ?

 

당연히 가능 하다.

 

onkeydown 이벤트 속성이 그 중 하나이다.

 

 

 

아무 키나 입력을 하기만 하면, alert() 기능이 실행 되는 모습을 볼 수 있다.

 

7.

이렇게 많은 이벤트 속성들이 존재 하고,

위에서 정리한 이벤트 속성들은 'on' 으로 시작되는 속성 이였다.

 

onclick,

onchange,

onkeydown,

..

 

이러한, 속성들을 자바스크립트 에서는 이벤트 라고 한다.

 

8.

 

위에서, onclick 이벤트 속성을 배웠으니 night / day 버튼을 만들어 보자.

 

document.querySelector()

 

문법은 자바 스크립트 문법 이다.

 

.style 은 CSS 문법을 사용하겠다는 의미 이다.