12. Event / 이벤트 / 자바스크립트

<퀴즈>

1. ___ 는 코드의 논리적인 흐름을 하나로 묶는 역할을 한다.

2. ___ 키워드로 함수를 선언한다.

3. ___ 키워드는 반환값을 나타내며 반환값이 없을 수도 있다.

4. 변수에 함수를 할당하여 사용하는 것을 ___ 라고 한다.

 

<정답>

1. 함수

2. function

3. return

4. 익명함수

 

JS란?

사용자 동작(이벤트)에 반응(핸들링)하기 위한 언어이다.

클라이언트측 특성화된 언어

 

이벤트?

웹 페이지에서 발생하는 모든 사용자의 액션

 

이벤트 사용하기위해 이벤트 핸들러를 등록함.

이벤트 핸들러(반응)는 이벤트 이름 앞에 "on"이 붙음

 

이벤트 핸들러 등록 방법

1. 속성으로 등록

2. HTML DOM : DOM 객체 탐색으로 등록

3. addEventListener() 메서드 : 메서드를 통해 이벤트 등록

 

1. 속성으로 등록하는 이벤트 핸들러 등록하는 방법을 배워보자

코드를 작성해보자

기본적인 index.html

"test"아이디를 가진 p태그의 컨텐츠를 바꾸는 함수를 만들자.

클릭시 changeText함수가 호출될 수 있도록 index.html을 수정해보자

 

배열을 통해 클릭할 때 마다 다른값의 컨텐츠들이 출력되도록 main.js를 수정해보자

 

2. 이번에는 HTML DOM을 이용해서 이벤트 핸들러를 등록해보자

index.html에는 다음처럼

<button id="btn"> HTML DOM 변환 </button>

 

를 추가하자

main.js는 다음과 같이 수정하자.

DOM객체를 선택하고 on이벤트를 적용한뒤 익명함수를 사용해서 호출한다.

<퀴즈>

1. ___ 은 웹 페이지에서 일어나는 모든 사용자 액션

2. ___ 을 등록하는 방법에는 ___ 가지 방법이 존재

3. ___ 은 마우스가 지정한 요소를 클릭할 때 발생