JavaScript 22 event 등록

onXXXX 속성을 이용한 함수 등록

onXXX : 각 엘리먼트마다 특정 이벤트가 발생했을 때 호출 할 메소드를 등록하는 속성이 있다.
- 이벤트가 발생했을 때 호출하는 메소드 => EventListener
- EventListener 를 등록하는 속성
- eg) onclick : click 이벤트에 대해 Listener를 등록하는 속성
- Listener 함수의 문법 : function Listener(event){...}

 * 웹 브라우저에서 EventListener 자동 생성하기
 - HTML 태그에서 onXXX 속성 선언
 - <h1 onclick='JavaScript'>안녕!</h1>
 - 위와 같이 html 태그의 속성으로 Listener 를 설정하면, 다음의 JavaScript 문장이 자동 생성됨.
 - HTML과 JavaScript 코드가 섞여 있어 해석이 힘들다. => 유지보수 난해함
 - 자주 사용하는 것은 좋지 않다.
 element.onclick = function(event){
   onclick 속성에 들어있는 자바 스크립트 코드를 다음에 복사함.
 }

/* element.oncilck = function(event){
h05 태그의 onclick 속성에 들어있는 코드를 다음에 복사함
ohora();
} */

addEventListener() 함수를 이용한 Listener 등록

addEventListener() : 여러 개의 Listener를 등록할 수 있다.
 - Listener 추가하는 방식의 장점은
  필요할 때 특정 기능을 추가 혹은 삭제 할 수 있다.
 1. 클릭했을 대 수행하는 기본 기능
 2. 특정 기간동안 수행할 기능 -> 기간이 지나면 수행을 하지 말아야 한다.
   
 onclick 속성과 addEventListener() 의 실행 순서
 Chrome : 선언한 순서대로
 Firefox : onclick 속성에 등록된 함수 먼저 호출. -> addEventListener()로 등록한 함수 호출.