> For the complete documentation index, see [llms.txt](https://hidaehyunlee.gitbook.io/fork-my-brain/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://hidaehyunlee.gitbook.io/fork-my-brain/web/javascript/click-eventlistener.md).
# Click eventListener 등록하기
즉, js파일에 발생했을 때 실행 되어야 하는 함수를 짜면 브라우저는 그 이벤트가 발생했을 때 등록된 코드를 실행하게 된다. 이런 방식을 이벤트 프로그래밍이라고 한다.
## 0. 자바스크립트 구구단 게임
```markup
Document
구구단 게임
X
=
```
사용자에게 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
```
위 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` 이벤트가 발생하면 결과가 나오도록 함수를 만드는 것이다.