[JS] Window - addEventListener 이벤트 처리하기

2022.07.01 - [WEB/Javascript] - [JS] 브라우저 DOM

[JS] 브라우저 DOM

이전 DOM 포스팅에 사용했던 버튼 예시를 사용해보자

See the Pen Untitled by Tae (@Tae54) on CodePen.

---

타겟.addEventListener(타입(이벤트명),함수(리스너))

const btn = document.querySelector('.btn');
//문서 내에서 주어진 선택자를 만족하는 첫 번째 Element를 반환한다.

btn.addEventListener('click',(event) => {
  alert('경고창!\n연습입니다.')
  //window 객체 메소드로 html안에 없던 요소를 생성해서 알림을 보낸다.
})

타입(이벤트)에대한 예시는 이전 포스팅에 올렸으니 참고하자

 

이벤트('click') 발생시 처리할 함수(리스너)를 설정하는 방법은 다양한데

1. 화살표 함수를 통해 함수이름과 함께 선언

button.addEventListener('click', (onButton/함수이름) => {
    console.log('이벤트 발생');
});

2. 메소드안에서 함수내용만 선언

button.addEventListener('click', function() {
    console.log('이벤트 발생');
});

3.메소드 밖에서 함수 선언하고 가져오기

function onButton() {
    console.log('이벤트 발생')
};

button.addEventListener('click', onButton);

 

이벤트 발생시 요소 혹은 정보 나타내기

btn.addEventListener('click',(func)=> {
  alert('경고창!\n 연습입니다.');
  document.querySelector('.log').innerHTML = func;
  //함수이름으로 이벤트 정보를 출력
  document.querySelector('.log2').innerHTML= func.target;
  //함수이름.target 으로 이벤트 타겟 요소 출력
})

---

이벤트 삭제하기 : 타겟.removeEventListener(타입(이벤트명),함수(리스너))

-함수명이 필요하다. 위의 3번 방식의 함수를 가져온다,

-시간지연이 필요하다.

 

setTimeout( 함수 , 시간(ms))으로 몇 초가 지난 후에 함수를 실행하도록 한다.

이벤트리스너를 삭제하는 함수를 사용하여 이벤트 처리를 한번 실행하고난 후 몇 초가 지나면 이벤트를 실행할 수 없다. 

function messageAlert () {
  alert('경고메세지입니다.');
};

btn.addEventListener('click',messageAlert)

setTimeout(()=>{  btn.removeEventListener('click',messageAlert);
},5000);

codepen의 js내용을 모두 지우고 다시 위의 코드로 실행하면

5초뒤에 버튼을 아무리 많이 눌러도 메시지 알림창은 뜨지않는다.