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 |