---
description: >-
  즉, js파일에 발생했을 때 실행 되어야 하는 함수를 짜면 브라우저는 그 이벤트가 발생했을 때 등록된 코드를 실행하게 된다. 이런 방식을
  이벤트 프로그래밍이라고 한다.
---

# Click eventListener 등록하기

## 0. 자바스크립트 구구단 게임

```markup
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <h1>구구단 게임</h1>
    </div>
    <div>
        <input type="number" id="first">
        <span>X</span>
        <input type="number" id="second">
        <button id="click">계산</button>
    </div>
    <div>
        <span>=</span>
        <span id="result"></span>
    </div>
    <script src="index.js"></script>
</body>
</html>
```

사용자에게 2개의 숫자를 입력받아 계산하는 간단한 구구단 html 파일을 만들었다. 자바스크립트는 처음 써보는거라, **세 가지 고민점**이 있었다.

1. HTML 파일에 JavaScript 파일 연결하는 방법
2. `input` 태그에 입력받은 값을 JavaScript 파일에서 사용하는 방법
3. `계산` 버튼을 클릭했을 때 계산하도록 하는 방법

각 물음들에 대한 해결책을 정리해보았다.

## 1. JavaScript 파일 HTML에 연결하기

### 외부 파일로 분리

js를 별도의 파일로 분리할 수 있다. 장점은 보다 엄격하게 정보와 제어를 분리할 수 있다. 하나의 js 파일을 여러 웹페이지에서 로드함으로서 js의 재활용성을 높일 수 있다.

* script는 head 태그 보다 bodt 태그(페이지의 하단)에 위치시키는 것이 더 좋은 방법이다.
* [HTML에서 JavaScript 로드하기](https://opentutorials.org/course/1375/6620) 참고

## 2. `input` 태그에 입력받은 값을 js파일에서 사용하기

### getElementById()

요소에 `id` 속성이 있으면 위치에 상관없이 메서드 `document.getElementById(id)`를 이용해 접근할 수 있다.

```javascript
const first = document.querySelector('#first').value;
```

input 태그는 `.value` 로 값을 참조하고, span 태그에는 `.textContent` 를 써서 값(계산 결과)를 넣어준다.

* [getElement, querySelector로 요소 검색하기](https://ko.javascript.info/searching-elements-dom) 참고

## 3. '계산' 버튼을 클릭했을 때 계산하는 함수

**`이벤트(event)`를 만들어줘야 한다.**

> 이벤트란?
>
> 어떤 사건을 의미한다. 브라우저에서의 사건이란 사용자가 클릭을 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 의미한다.

즉, js 파일에 어떤 일이 발생했을 때 실행 되어야 하는 함수를 짜면 브라우저는 그 일이 발생했을 때 등록된 코드를 실행하게 된다. 이런 방식을 **이벤트 프로그래밍**이라고 한다.

### addEventListener()

`addEventListener`은 이벤트를 등록하는 가장 권장되는 방식이다. 이 방식을 이용하면 여러개의 이벤트 핸들러를 등록할 수 있다. 자세한 내용은 생활코딩 [이 페이지](https://opentutorials.org/course/1375/6761) 참고.

```markup
<button id="click">계산</button>
```

위 html파일에서, `click` 버튼을 클릭했을 때 입력받은 두 값을 곱하고싶다.

```javascript
document.querySelector('#click').addEventListener('click', () => {
    const first = document.querySelector('#first').value;
    const second = document.querySelector('#second').value;

    document.querySelector('#result').textContent = first * second;
});
```

계산 버튼에 자바스크립트로 `click` 이라는 이벤트를 등록해줬다. `click` 이벤트가 발생하면 결과가 나오도록 함수를 만드는 것이다.
