1. 이벤트 버블링과 이벤트 캡처링

0. 브라우저의 이벤트의 감지방식

td를 클릭하면 이벤트가 최상위 조상에서 시작해 아래로 전파되고 (캡처링 단계), 이벤트가 타깃 요소에 도착해 실행된 후 (타깃 단계), 다시 위로 전파된다. (버블링 단계) 이러한 과정을 통해 요소에 할당된 이벤트 핸들러가 호출된다.

1. 이벤트 버블링

한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고 가장 최상단의 조상요소를 만날 때까지 이 과정이 반복되면서 핸들러가 동작하는 특성을 말한다.

1. 이벤트 버블링 중단

1. event.stopPropagation()메서드

event.stopPropagation()메서드를 사용하면 위쪽으로 일어나는 버블링을 중단할 수 있다. 대신 다른 핸들러들이 동작하는 건 막지 못한다.

2. event.stopImmediatePropagation()메서드

버블링을 멈추고 요소에 할당된 다른 핸들러의 동작을 막으려면 event.stopImmediatePropagation()을 사용한다.

3. preventDefault()

현재 이벤트의 기본 동작을 막으려면 preventDefault()를 사용한다.

4. return false

stopPropagation()과 preventDefault()를 모두 사용한 것과 같다.

5. 버블링 중단의 필요성?

이벤트 버블링을 막아야 하는 경우는 거의 없다. event.stopPropagation()을 사용하면 추후에 문제가 될 수 있는 상황을 만들어낼 수 있기 때문. 꼭 버블링을 막아야 한다면 커스텀 이벤트 등을 사용해 문제를 해결할 수 있다.

2. 이벤트 캡처링

요소를 클릭하면 클릭 이벤트가 발생한 시점을 찾기 위해 최상위 조상에서 시작해 아래로 탐색하게 되는데 이를 캡쳐링이라고 한다.
캡처링 단계를 이용해야 하는 경우는 흔치 않아서 관련 코드를 발견하는 일은 거의 없을 것이다.
캡처링 단계에서 이벤트를 잡아내려면 addEventListener의 capture옵션을 true로 설정해야 한다. 그러면 해당 이벤트를 감지하기 위해 이벤트 버블링과 반대 방향으로 탐색한다.

1. capture옵션

capture옵션은 두 가지 값을 가질 수 있다.
1. false이면 (default 값) 핸들러는 버블링 단계에서 동작한다.
2. true이면 핸들러는 캡처링 단계에서 동작한다.

3. 이벤트 위임

하위 요소에 각각 이벤트를 붙이지 않고 상위 요소에서 하위 요소의 이벤트들을 제어하는 방식

2. this

1. this키워드

메서드는 자신이 속한 프로퍼티를 참조하고 변경할 수 있어야 한다.
this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기참조변수이다.

1. this 특징

1. 자바스크립트 엔진에 의해 암묵적으로 생성됨.
2. 코드 어디서든 참조할 수 있음
3. this바인딩(this가 가리키는 값)은 함수 호출 방식에 의해 동적으로 결정됨.

2. strict mode

this는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수이므로 객체의 메서드 내부 또는 생성자 함수 내부에서만 의미가 있다.
strict mode가 적용된 일반 함수 내부의 this에는 undefined가
바인딩된다. 일반 함수 내부에서 this를 사용할 필요가 없기 때문이다.

2. 함수 호출 방식과 this바인딩

1. 렉시컬스코프와 this바인딩

렉시컬스코프는 함수 객체가 생성되는 시점에 상위 스코프를 결정한다.
this바인딩은 함수 호출 시점에 결정된다.

2. 함수 호출 방식

const foo = function () {
  console.dir(this);
};

1. 일반함수 호출 : 전역객체 window를 가리킴 (단 strict mode가 적용된 경우 undefined임)

foo();  window

this를 사용하고 싶다면
1. 4번 방법을 사용하여 this를 명시적으로 바인딩하는 방법.
2. 화살표 함수를 사용하여 this바인딩을 일치시킴 (화살표 함수의 this는 상위 스코프의 this를 가리킨다.)
3. this바인딩을 변수에 할당하여 사용

2. 메서드 호출 : 메서드를 호출한 객체를 가리킴

const obj = { foo };
obj.foo(); // obj

3. 생성자 함수 호출 : 생성자 함수가 생성한 인스턴스를 가리킴

new foo(); // foo {}

4. Function.prototype.apply/call/bind 메서드에 의한 간접 호출 : 인수에 의해 결정됨

const bar = { name: 'bar' };

foo.call(bar); // bar
foo.apply(bar); // bar
foo.bind(bar); // bar

apply메서드와 call메서드의 본질적인 기능은 함수를 호출하는 것!
함수를 호출하면서 첫번째 인수로 전달한 특정 객체를 호출한 함수의 this에 바인딩한다.

1. apply메서드 : 호출할 함수의 인수를 배열로 묶어서 전달
2. call메서드 : 호출할 함수의 인수를 쉼표로 구분한 리스트 형식으로 전달
3. bind메서드 : 첫번째 인수로 전달한 값으로 this바인딩이 교체된 함수를 새롭게 생성해 반환

5. Array.from() (ES6 ~)