Front-End/DOM

DOM EventTarget.addEventListener()

SeanK 2021. 11. 5. 19:10

 

 

 

React를 공부하다보니 점차 DOM 개념을 까먹게 되는 듯 하다. 

 

오늘 DOM을 이용해 Click 이벤트 발생시 특정한 함수에 인자를 전달하도록 코드를 짜려 했는데, 

 

굉장히 고생을 했다 ㅠㅠ

 

청년치매..

 

 

오늘은 addEventListner를 다시한번 정리해보려 한다. 

 

Syntax

 

target.addEventListener(type, listener);

 

 

type은 "click"등과 같이 이벤트를 리슨할 이벤트 타입을 넣는 파라미터다. 

 

아래 링크에 어떤 타입들이 있는지 잘 정리 되어 있다. 

https://developer.mozilla.org/en-US/docs/Web/Events

 

listener는 type 파라미터가 발생했을 때 작동할 객체(함수)를 넣는 파라미터다. 

 

아래 예시를 보면 이해에 도움이 된다. 

 

element.addEventListener('click', eventHandler);

function eventHandler(event) {
  if (event.type == 'fullscreenchange') {
    /* handle a full screen toggle */
  } else /* fullscreenerror */ {
    /* handle a full screen toggle error */
  }
}