TIL(Web)-2020.12.16(event object)

오늘은 이벤트 객체에 대해서 학습하였습니다.

Today I Learned

• Event object
• Event bubbling
• Event notification
• Event inner function

Event Object

• 이벤트가 발생하였을 때, 어디에서 발생했는지와 같은 이벤트에 관한 정보를 담고 있는 객체가 Event Object이다
• target : 이벤트가 발생한 대상 태그
• currentTarget : 이벤트가 등록된 태그

Event notification

• 이벤트 발생시 window객체는 하위에 있는 모든 엘리먼트 객체들에게 이벤트 발생 지점을 찾기위해 탐색하는 과정을 거침.
• '너가 이벤트 발생시켰니?' 라는 notification을 진행하여 자식객체들에게 수소문 함
• 이 과정을 event notification이라고 한다.

Event bubbling

• 자식과 부모 객체에 모두 이벤트가 등록 되어있는경우, 이벤트의 실행 순서는 클릭이 된 가장 말단(자식)의 이벤트부터 위로 차례차례 하나씩 실행된다.
• 만일, 가장 말단(자식)의 이벤트만 실행하고 싶을때는?
  • e.stopPropagation()을 통해 버블링을 멈춘다.

Event Delegation

• 부모에 이벤트를 등록해 두면 자식 객체에서도 이벤트가 실행이 된다.(전이됨)
• 이때 클릭한 객체 : event.target
• 이벤트가 등록되어있는 객체 : event.currentTarget
• 유의사항
  • 경계선 등 target이 변경되는 상황을 처리해줘야한다,
    • target을 검사하여 원하는 타겟이 클릭되었을 때만 실행되도록 조정한다.

기본 행위 제한하기

• 예를들어 a 태그에는 href라는 링크속성이 내재되어있다.
• 하지만 a태그를 통해 버튼을 만들고 싶을때, a태그의 기본 클릭 이벤트를 제거하고싶다면?
  • 해당 태그의 이벤트 객체에서 기본 이벤트를 제거 하면 된다
  • e.preventDefault()

실행 순서 바꾸기

• 이벤트의 실행은 notification 이후, 말단 객체의 이벤트부터 bubbling 되어 실행된다.
• 하지만 어떤 경우, 부모의 이벤트만 먼저 실행하고 나머지 이벤트를 실행하고 싶지 않은 경우도 있다.
• 이럴때 부모객체의 이벤트를 notification과정에서 실행되도록 하는 방법이 있다
  • ("click",function(e){},true)
  • 이벤트 함수의 3번째 인자를 true로 하게 되면, notification 과정에서 먼저 이벤트를 실행하게 된다.
  • 실행 후, stopPropagation()을 달아주면 나머지 이벤트는 실행되지 않는다.

위의 예제의 경우, showRoom 이라는 부모객체가 notification 과정에서 먼저 실행이 되고, 그 이후에 이벤트는 더이상 실행 되지 않는다.

오늘은 이벤트 객체에 대하여 학습하였습니다.