javascript 이벤트 추가, 제거하기

1. 이벤트 추가하기 - addEventListener()
2. 이벤트 제거하기 - removeEventListener()

 

 

이벤트 추가하기 - addEventListner()


객체에 이벤트를 추가하려면 addEventListener() 메소드를 사용합니다.

element.addEventListener(type, eventListener);

 

addEventListener()는 2개의 파라미터를 입력받습니다.

- type : 이벤트 타입

- eventListener : 이벤트가 발생했을 때 실행할 함수

 

 

import React from 'react';

const App = () => {

    window.addEventListener('click', async () => {
      const eventBtn = document.getElementById('ebtn');

      eventBtn.onclick = async function(){
        try{
          console.log('addEventListner!!!');
        }
        catch(e){
          console.log(e);
        }
      }
    });
  
    return (
        <div>
          <button id="ebtn">Click</button>
        </div>
    )
}

export default App

 

eventBtn이 클릭됐을때 이벤트 발생

 

이벤트 제거하기 - removeEventListner()

 

element.removeEventListener(type, eventListener);

이 메소드는 아래의 2가지를 파라미터로 입력 받습니다.

 - type : 삭제할 이벤트 타입

 -eventListener : 삭제할 이벤트 리스터 (addEventListener()의 2번째 파라미터로 전달된 함수)

 

removeEventListener() 메소드를 사용해서 이벤트를 삭제하기 위해서는

addEventListener() 메소드를 사용하여 이벤트를 등록할 때,

2번째 파라미터로 전달하는 eventListener를 익명함수로 전달하면 안됩니다.

removeEventListener() 메소드를 호출할 때 2번째 파라미터로 넣어주어야 하기 때문입니다.

 

 

<추가 내용 작성중>