JavaScript 이벤트 핸들러

<이벤트>

웹에서 마우스나 키보드의 조작에 따라 원하는 기능을 실행하는 것입니다.

 

<핸들러>

하나의 요소에 하나의 이벤트를 처리할 수 있는 이벤트 처리기입니다.

 

<이벤트 핸들러를 만드는 방법>

첫번째는 HTML의 button태그를 이용하는 것입니다.

 

 

button 태그 안에 onclick 이라는 속성에 이벤트를 줄 수 있습니다.

사진처럼 코드를 작성하면 웹 페이지에서 greet이라고 쓰여진 버튼을 클릭했을 때 a함수가 실행되어 콘솔 창에 hello! 라는 문자열이 출력됩니다.

 

 

잘 출력된 것을 확인할 수 있습니다.

 

버튼을 누를 때마다 이벤트가 실행되기 때문에 버튼을 15번 누르니 hello!도 15번 출력된 것을 볼 수 있습니다.

onclick 속성 외에도 다양한 속성을 활용해 이벤트를 발생시킬 수 있습니다. (onmouseover, onkeypress, . . .)

---

두번째는 이벤트 리스너를 이용해 이벤트 핸들러를 등록하는 방법입니다.

이벤트 리스너 함수는 등록할 요소, 이벤트 타입, 등록할 이벤트 핸들러를 작성해 주어야 합니다.

 

 

변수 a는 id가 일치하는 부분인 body의 click me!를 선택합니다.

반환값 a를 이용하여 addEventListener 함수를 통해 a를 "click" 하면 아래 만들어준 hello 함수가 실행되도록 합니다.

웹 페이지의 ' click me! ' 를 클릭했을 때 Hello! 가 document에 출력됩니다.

 

 

live server 에서 결과를 확인해볼 수 있습니다.

 

---

<두 방법의 비교>

첫번째 방법은 button 태그와 같이 HTML요소를 이용하고, 두번째 방법은 HTML요소를 이용하지 않고 JavaScript 내부에서 이벤트를 등록합니다.

자세히 다루지는 않았지만 addEventLister 함수를 사용하면 하나의 요소에 여러개의 이벤트를 처리할 수 있고 각 이벤트의 실행 단계도 설정할 수 있습니다.