JavaScript

DOM

Event

Event가 발생하면 Event Object가 생성된다.

Event 추가

• HTML 속성 활용
  => HTML 속성을 활용할 때에만 실행 연산자 ()가 있어야 한다.
• DOM property 활용
  => Event 하나에 한 동작만 적용시킬 수 있다.
• Method 활용
  => .addEventListener(이벤트, 함수)

Event 제거

.removeEvenetListener(이벤트, 함수)
=> 추가된 Event의 함수와 동일한 이름을 넣어주어야 한다.

Bubbling

겹치는 영역에서 상위 요소의 Event가 같이 동작하는 현상을 말한다.
=> Event Object에 .stopPropagation()을 사용해서 방지할 수 있다.

Capturing

Bubbling의 Event의 동작 순서가 반대로 된다.
=> Event의 함수 뒤에 true를 줘서 사용한다.

Delegation

Bubbling이 발생하는 상황에서, 상위 요소의 Event가 하위 요소로 위임되는 것을 말한다.

• .currentTarget
  => Event를 갖고 있는 요소를 반환한다.
• .target
  => Event를 동작시킨 요소를 반환한다.

  .closest()를 활용하여 동작 범위를 상위 요소까지로 확장시킬 수 있다.