[Javascript] 이벤트 추가, 제거하기

 

이번에는 element에 이벤트를 추가, 삭제 하는 방법을 정리해 보도록 하겠습니다.

 

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

 

 

1. 이벤트 추가하기 - addEventListener()

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

element.addEventListener(type, eventListener);

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

- type : 이벤트 타입

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

 

 

 이벤트 추가하기 

<input type='button' id='my_button' value='클릭하세요' />

const my_btn = document.getElementById('my_button');

my_btn.addEventListener('click', () => {
  alert("안녕하세요!!");
});

 

위 예제는 '클릭하세요' 버튼에, 

클릭 이벤트가 발생하면, '안녕하세요!!'라는 alert을 띄웁니다.

 

 

 여러개의 이벤트 리스너 추가하기 

<input type='button' id='my_button' value='클릭하세요' />

const my_btn = document.getElementById('my_button');

my_btn.addEventListener('click', () => {
  alert("안녕하세요!!");
});

my_btn.addEventListener('click', () => {
  alert("만나서 반가워요!!");
});

 

addEventListener() 메소드를 사용하면

같은 타입의 이벤트라도 여러개를 추가할 수 있습니다.

위 코드는 'my_button' 버튼에 2개의 click 이벤트 리스너를 추가하였습니다.

 

 

2. 이벤트 제거하기 - removeEventListener()

이벤트를 삭제할 때는 removeEventListener() 메소드를 사용합니다.

element.removeEventListener(type, eventListener);

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

 - type : 삭제할 이벤트 타입

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

 

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

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

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

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

 

<div id='my_div'></div>
<div id='result'></div>

<input type='button' id='delete_event' value='이벤트 삭제' />

#my_div {
  width: 100px;
  height: 100px;
  background: green;
}

// 1. my_div 영역에 이벤트 등록
const my_div = document.getElementById('my_div');
const myDivEventHandler = (e) => {
  const result_div = document.getElementById('result');
  result_div.innerText = `x : ${e.offsetX}, y : ${e.offsetY}`
};
my_div.addEventListener('mousemove', myDivEventHandler);

// 2. 'my_div'에 적용된 이벤트 삭제
const delete_btn = document.getElementById('delete_button');
delete_event.addEventListener('click', () => {
  my_div.removeEventListener('mousemove', myDivEventHandler);
});

 

위 예제는,

초록색 div 영역에서 마우스를 움직이면 마우스의 offset을 출력해주고 있습니다. (mousemove 이벤트)

그리고, '이벤트 삭제' 버튼을 클릭했을 때, 

div 영역에 적용된 mousemove 이벤트가 삭제됩니다.

 

my_div.addEventListener('mousemove', myDivEventHandler);

my_div.removeEventListener('mousemove', myDivEventHandler);

이벤트를 삭제하기 위해서 

addEventListener의 2번째 파라미터로 익명함수가 아닌

myDivEventHandler라는 함수를 전달했습니다.

 

---

 

이벤트를 추가하고, 삭제하는 방법을 알아보았습니다.