JavaScript Event

• Event와 Function

브라우져는 사용자의 다양한 행동(Event)을 인식 할 수 있고, 이에 따른 동작(function)을 실행할 수 있다.

마우스 > 휠을 동작, 3초간 머무름, 클릭, 더블 클릭 등등 

키보드 > 한글작성, 영어작성, 썻다가 지움, 특수문자입력 등등

• addEventListener

검색창을 클릭하면, 검색창이 사라짐

addEventListener의 첫번째 인자는 Event Type(유저의 행동), 두번째 인자는 function(브라우져의 동작)으로,
두번째 인자를 Call Back 함수, Event Handler, Event Listener라고 부름

콜백 함수와 addEventListener를 분리하는 방식도 가능(onclick과 유사한 방식)

※ Event Type 모음

더 다양한 Event Type - https://developer.mozilla.org/ko/docs/Web/Events

※ onclick 사용을 지양하고, addEventListener를 사용하는 것이 좋은 이유

 

1. removeEventListener("event", functionName)가 존재한다.

    

     

            JS Code가 거대하고 복잡해지면, 해당 listener을 찾아서 수정하는 것이 어려워 질 수 있다 

            > 그냥 listener를 삭제하면 위에 코드를 신경 쓸 필요가 없음

    

         2. 한개의 버튼에 복수의 함수 기능을 더할 수 있다 

         > 어떤 상황이 발생하면 remove하고, 다시 다른 기능을 add하면 다른 버튼이 되므로

    

         3. 한개의 버튼에 동시에 복수의 함수 기능을 더할 수있다 

         > 2)과는 다른 의미로 한버튼으로 복수개의 함수를 동시에 실행할 수 있다. 

Worst Way

 

1. JS 파일과 HTML 파일이 분리되지 않아, 유지보수가 어렵다.(동적 기능 변경을 위해 HTML 파일을 뒤져야함)
2. 해당 기능의 Button이 1개라면 그나마 낫지만, 복수 개일 경우 함수의 재사용이 비효율적이다

출처: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_handler_properties

• target

브라우져는 Event Listener를 호출할 때, 사용자로부터 어떤 이벤트가 발생 했는지에 대한 정보를 담은
객체(객체명은 임의로 지정할 수 있음)를 생성하여, Listener 함수에 전달함

이벤트 객체 이름을 e로 하여(임의로 지정가능), Call Back함수 안으로 넣어준 후, 그 객체안의 정보를 target을 통해서 확인

• const / let / var의 차이 

const는 같은 이름의 변수 선언이 불가 하고, 값의 재할당도 불가

let은 값의 재할당은 가능하지만, 같은 이름의 변수 선언은 불가

var는 같은 이름의 변수 선언도 가능하고, 값의 재할당도 가능

제한이 없기 때문에 한 Event에 복수의 function이 발생할 수 있음

(function을 변경하고 싶을 경우, 이전에 지정한 function을 지우고 새로운 function을 지정해야 혼선이 없음!)