[JavaScript] Document 객체
[JavaScript] DOM : Document Object Model (문서 객체 모델) DOM이란? DOM을 풀어서 쓰면 Document Object Model, 즉 문서 객체 모델을 의미합니다. JavaScript를 이용해서 HTML과 CSS를 제어하기 위해서는 필수..
jangbageum.tistory.com
이벤트 리스너 event listener
이벤트란 사용자가 어떠한 행동에 의해 상태를 변화시킬 수 있는 그러한 모든 행동을 칭합니다.
키보드 누르기, 마우스 움직이기, 포커스 등등,,,
이벤트 리스너란 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리킵니다.
지정된 타입의 이벤트가 특정 요소에서 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킵니다.
이벤트 리스너 등록
"on+이벤트 (이벤트 핸들러)"의 형태를 이용할 수 있지만 여기서는 여러 이벤트를 하나의 요소로 다룰 수 있는 "addEventListener"메서드를 사용해보도록 합시다. 이벤트 사용 방법에 대한 방법들은 이전 글에서 확인할 수 있습니다. 👉👉👉 https://jangbageum.tistory.com/8
addEventListener는 이벤트를 등록할 시 사용하는 메서드입니다.
# 이벤트 리스너 등록
DOM객체. addEventListener(이벤트 명, callback 함수 명, 옵션)이벤트 명은 DOM객체에서 발생할 수 있는 이벤트 명입니다.
callback 함수 명은 이벤트 발생시 발동되는 함수를 칭합니다. 화살표 함수로도 작성 가능합니다.
옵션은 생략이 가능하며, 자식과 부모 요소에서 발생하는 버블링을 제어하기 위한 옵션입니다.
예제
아래에는 브라우저 창 안의 버튼을 클릭 시 "hello!"문구를 콘솔에 보이는 예제입니다.
# 이벤트 리스터 등록 예제
<html>
<div class="test_btn">클릭</div>
</html>
<script>
const btn = document.querySelector('.test_btn'); # 버튼 객체 지정
btn.addEventListener('click', showConsole); # 지정된 객체에 "click"이벤트 등록
# showConsole은 callback함수
function showConsole(){ # callback함수 정의
console.log("hello!");
}
</script>
아래는 위 예제를 화살표 함수로 표현한 예제입니다.
# 이벤트 리스터 등록(화살표 함수 사용) 예제
<html>
<div class="test_btn">클릭</div>
</html>
<script>
const btn = document.querySelector('.test_btn'); # 버튼 객체 지정
btn.addEventListener('click', () => { # 지정된 객체에 "click"이벤트 등록
console.log("hello!") # 화살표 함수로 callback 지정
});
</script>
이벤트 리스너 삭제
이벤트 리스너는 더이상 필요가 없다면 웹 애플리케이션의 메모리 누수를 막기 위해 되도록이면 삭제해주셔야 합니다.
이벤트 리스너를 삭제할 때는 "removeEventListener"메서드를 사용합니다.
# 이벤트 리스너 삭제
DOM객체. removeEventListener(이벤트 명, 실행했던 callback 함수 명);
아래는 이벤트 리스너 삭제 예제입니다.
# 이벤트 리스너 삭제 예제
<script>
btn.removeEventListener('click', showConsole);
</script>
이벤트의 종류
UI 이벤트
| 이벤트 | 설명 |
| load | 웹페이지나 스크립트의 로드가 완료되었을 때 |
| unload | 웹페이지가 언로드될 때(주로 새로운 페이지를 요청한 경우) |
| error | 브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 존재하지 않는 경우 |
| resize | 브라우저 창의 크기를 조절했을 때 |
| scroll | 사용자가 페이지를 위아래로 스크롤할 때 |
| select | 텍스트를 선택했을 때 |
Keyboard 이벤트
| 이벤트 | 설명 |
| keydown | 키를 누르고 있을 때 |
| keyup | 누르고 있던 키를 뗄 때 |
| keypress | 키를 누르고 뗏을 때 |
| keyCode | 키 코드값 |
Mouse 이벤트
| 이벤트 | 설명 |
| click | 마우스 버튼을 클릭했을 때 |
| dbclick | 마우스 버튼을 더블 클릭했을 때 |
| mousedown | 마우스 버튼을 누르고 있을 때 |
| mouseup | 누르고 있던 마우스 버튼을 뗄 때 |
| mousemove | 마우스를 움직일 때 (터치스크린에서 동작하지 않는다) |
| mouseover | 마우스를 요소 위로 움직였을 때 (터치스크린에서 동작하지 않는다) |
| mouseout | 마우스를 요소 밖으로 움직였을 때 (터치스크린에서 동작하지 않는다) |
| mouserenter | 해당 요소에 마우스 커서를 올려다놓았을때 |
| mouseleave | 해당 요소에 마우스 커서를 빼낼때 |
Focus 이벤트
| 이벤트 | 설명 |
| focus/focusin | 요소가 포커스를 얻었을 때 |
| blur/foucusout | 요소가 포커스를 잃었을 때 |
Form 이벤트
| 이벤트 | 설명 |
| input | input또는 textarea요소 값이나 contenteditable특성을 가진 요소 값이 변경되었을 때 |
| change | select box, checkbox, radio button의 상태가 변경되었을 때 |
| submit | form을 submit할 때 (버튼 또는 키) |
| reset | reset 버튼을 클릭할 때 (최근에는 사용 안함) |
Clipboard 이벤트
| 이벤트 | 설명 |
| cut | 콘텐츠를 잘라내기할 때 |
| copy | 콘텐츠를 복사할 때 |
| paste | 콘텐츠를 붙여넣기할 때 |
더 다양한 이벤트는 아래 경로인 W3Schools에서 확인할 수 있습니다.
HTML DOM Event Object
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
[공부/JavaScript] - [JavaScript] Event Handler (이벤트 핸들러)와 Event Listener (이벤트 리스너)의 차이
[JavaScript] Event Handler (이벤트 핸들러)와 Event Listener (이벤트 리스너)의 차이
이벤트 Event 이벤트란 사용자와 웹 브라우저의 상호작용 과정에서 마우스 클릭, 움직임, 스크롤, 타이핑 등의 모든 행동에 의해 발생하는 모든 칭합니다. 이벤트가 발생했다는 것은 웹 페이지
jangbageum.tistory.com
'ETC > Frontend' 카테고리의 다른 글
| [HTTP] GET과 POST의 차이 (0) | 2022.07.07 |
|---|---|
| [JavaScript] Event Handler (이벤트 핸들러)와 Event Listener (이벤트 리스너)의 차이 (0) | 2022.01.26 |
| [JavaScript] Document 객체 (0) | 2022.01.26 |
| [JavaScript] DOM : Document Object Model (문서 객체 모델) (0) | 2022.01.26 |
