45. JavaScript - method and event

1. 메소드와 이벤트

1. 메소드(함수, 기능, 펑션)

1. 메소드는 기능을 정의해 놓은 코드 블록
2. 메소드의 선언

   //ES5
   function 메소드명(파라미터(파라미터도 타입 지정하지 않음)) {
    기능정의;
   }
   

//ES6
const 메소드명 = (파라미터) => {
기능정의;
};

```
3. return; : 아무것도 반환하지 않는 리턴문을 사용할 수 있다. 메소드의 종료를 의미한다. 특정 조건이 충족됐을 때 함수를 종료시켜야 한다면 return;으로 종료시킨다.
4. 지역변수와 전역변수
- 자바스크립트에서 지역변수는 중괄호 블록('{}')으로 감싸진 블록 안에 선언된 변수를 의미.
- 전역변수는 script 태그 안에서 바로 생성한 변수를 전역변수라고 부른다. 전역변수는 해당 html 페이지가 로드되면 생성돼서 다른 html페이지가 로드되기 전까지 유지된다.
5. 자바스크립트의 메소드는 호이스팅이 가능하다. 메소드(함수)가 어느위치에 선언되어 있던간에 호출하여서 사용할 수 있다.
6. 익명함수: 함수의 이름이 존재하지 않는 함수.
- const 변수명 = function() {

  }
- 익명함수의 사용은 변수명을 통해 사용한다.
- 익명함수는 호이스팅을 지원하지 않는다.

7. 즉시 실행 함수: 함수의 정의부가 페이지가 로드되면서 바로 실행되는 함수.
   • 즉시 실행함수는 페이지 로드 시에 딱 한 번만 실행되고 그 후에는 호출할 수 없다.

   • (function(매개변수) {
         기능
     })(매개변수에 들어갈 값);

8. 전역함수와 지역함수
   • 전역함수는 script 태그내에 선언되어 어디서든지 접근 가능한 함수
   • 지역함수는 중괄호 블록({})안에 선언되어 선언된 중괄호 블록 안에서만 호출가능한 함수.
9. ES6의 화살표 함수
   • 자바스크립트는 프로토타입기반의 언어. 자바스크립트는 prototype이라는 최상위 객체가 존재한다. 자바스크립트에서의 객체들은 prototype을 상속받아 만들어진다. 함수는 일급객체 중 하나.
   • 자바스크립트에서는 함수도 객체로 만들어진다. 당연히 prototype을 상속받아 만들어진다. 한 번만 사용하고 더 이상 사용하지 않는 메소드(함수)들에도 prototype이 생성되기 때문에 메모리 부족을 야기시킬 수도 있다.
   • 위 문제점을 해결하고자 탄생한 함수가 화살표함수. 화살표함수는 익명함수 기반이라 prototype을 상속받지 않고 prototype을 생성하지 않는다.
   • 일반 메소드가 객체로 생성되는 것과는 다르게 화살표함수는 객체로 생성되지않고 순수 함수의 기능만 하게된다.
   • 화살표함수의 정의

     const 메소드명 = (파라미터) => {
       기능
     }

   • 화살표함수와 일반함수의 차이점
     • 화살표 함수는 생성자 함수로는 사용할 수 없다. ES6부터 class라는 문법이 지원됐는데 생성자함수는 무조건 일반 메소드로 구현해야한다.
     • 화살표 함수는 객체가 아니기 때문에 prototype을 가질 수 없다.
     • 화살표 함수의 매개변수는 중복된 이름을 가질 수 없다.
     • 화살표 함수는 arguments, this, super, new.target등의 바인딩이 불가능하다. event는 가능하다.
     • 화살표 함수는 익명함수 기반이기 때문에 호이스팅이 지원되지 않는다.

2. 이벤트

1. 사용자가 브라우저에서 취하는 특정 행위를 이벤트라고 부른다.
2. 자바스크립트에서는 이벤트와 특정 기능을 매핑해서 이벤트가 발생했을 때 동작할 기능들을 정의해 놓을 수 있다.
3. 이벤트와 기능을 매핑시키는 방식
   • 태그선택.addEventListner(이벤트명, function() {
   • });
   • 태그선택.on이벤트명() = function() {
   • };
4. 마우스 이벤트
   • click: 사용자가 특정 태그를 클릭했을 때 발생하는 이벤트
   • dblclick: 사용자가 특정 태그를 더블클릭했을 때 발생하는 이벤트
   • mousedown: 사용자가 마우스 버튼을 눌렀을 때 발생하는 이벤트
   • mouseup: 사용자가 마우스 버튼에서 손을 뗐을 때 발생하는 이벤트
   • mousemove: 사용자가 마우스를 움직이면 발생하는 이벤트
   • mouseover: 사용자가 특정 태그에 마우스 커서를 올렸을 때 발생하는 이벤트(hover와 동일한 이벤트)
   • mouseout: 사용자가 특정 태그에서 마우스 커서를 밖으로 뺐을 때 발생하는 이벤트
5. 키보드 이벤트
   • keypress: 특정 태그에서 키보드가 눌렸을 때 발생하는 이벤트(ALT, CTRL, SHIFT, 방향키 제외)
   • keydown: 특정 태그에서 키보드가 눌렸을 때 발생하는 이벤트(ALT, CTRL, SHIFT, 방향키 포함). 제일 많이 사용되는 키보드 이벤트
   • keyup: 사용자가 키보드에서 손을 뗐을 때 발생하는 이벤트
6. 문서 로딩 이벤트
   • load: 문서가 모두 로딩되면 발생하는 이벤트
   • resize: 문서의 화면 크기가 변경되면 발생하는 이벤트
   • scroll: 문서의 화면에서 스크롤되었을 때 발생하는 이벤트
7. form관련 이벤트
   • blur: 폼 안의 특정태그가 포커스를 잃었을 때 발생하는 이벤트
   • change: 모든 input에서 value값이 변경되고 해당 input에서 포커스를 잃었을 때 발생하는 이벤트
   • focus: 폼 안의 특정태그에 포커스가 갔을 때 발생하는 이벤트
   • submit: 폼이 서브밋될때 발생하는 이벤트