[JavaScript]AddEventListener 이벤트 처리기 추가/삭제/타이머설정

1. 이벤트 처리기를 추가

const h1=document.querySelector('h1');
//최신방식 일반적으로 사용됨
h1.addEventListener('mouseenter', function(e) {
	alert('addEventListionedr ; great!');
});

//옛날방식으로 사용하지 말 것
h1.onmouseenter = function(e) {
	alert('addEventListionedr ; great!');
});

addEventListener를 쓰는 것이 나은 이유

• 동일한 이벤트를 여러개 추가 가능 재정의 안해도됨
• 실제로 이벤트처리기가 더이상 필요없어지면 삭제가 가능함(삭제 예제를 참고)함수를 export하고 넣어줌

 

2. 이벤트 처리기를 삭제

//이벤트 한 번만 실행하고 삭제하는 코드
const alertH1 = funtion(e) {alert('addEventListioner ; great!');
   h1.removeEventListener('mouseenter',alertH1);
});

h1.addEventLisener('mouseenter',alertH1);

 h1.removeEventListener('mouseenter',alertH1); 부분은 원하는 위치로 바꿔주면

그 부분에서 제거된다.

 

3. 시간을 설정해 자동으로 이벤트를 삭제

  //3초뒤 자동으로 이벤트처리기가 삭제됨
  setTimeout(() => h1.removeEventListener('mouseenter',alertH1),3000);