[Javascript] 이벤트 리스너

Day 14

이벤트 리스너 개념 구글링해보고 실습하기

Javascript 이벤트

DOM에서 특정 이벤트가 발생하게 되면 자바스크립트 이벤트 객체에서 확인할 수 있다.

이벤트 리스너란?

간단하게 해당 이벤트에 대해 대기중인 것을 이벤트 리스너라고 한다. (이벤트가 실행되는 것을 리스닝 중)

해당 이벤트가 발생하면 등록해둔 이벤트 리스너가 실행된다.

이벤트 종류

UI 이벤트 : 사용자가 웹페이지가 아닌 브라우저의 UI와 상호작용할 경우
키보트 이벤트 : 사용자가 키보드를 이용할 경우
마우스 이벤트 : 사용자가 마우스나 터치 화면을 사용할 경우
포커스 이벤트 : 사용자로 특정 요소에 포커스를 하거나 포커스를 중지할 경우

이벤트 리스너 사용하기

addEventListener() : 특정 이벤트가 발생할 경우 특정 함수를 실행할 수 있게 한다. (여러 이벤트 등록 가능)

removeEventListener() : 특정 이벤트를 제거할 수 있다.

등록하기

const DOM객체 = document.getElementById("test");
DOM객체. addEventListener('이벤트 종류', 실행할 함수명)

제거하기

DOM객체. removeEventListener('이벤트 종류', 실행할 함수명)

실습 예제

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Document</title>
</head>
<body>
  <div>
    <input type="button" id="target" value="button" />
  </div>
</body>
</html>
<script>  
  var t = document.getElementById('target');
    t.addEventListener('click', function(event){
        alert('이벤트 리스너 등록, '+event.target.value);
    });
</script>

'WEB' 카테고리의 다른 글

[ES6/Javascript] 변수 선언(let, const), 화살표 함수 선언 (0)	2022.03.08
[Javascript] 로컬 스토리지 (0)	2022.03.07
[Javascript] html 문서(DOM)에 접근하기 (0)	2022.03.05
[Javascript] 자바스크립트 함수 선언 & 호출 (0)	2022.03.04
[Javascript] 객체 & 배열 (0)	2022.03.03