1. addEventListener
클릭, 마우스 오버 등의 이벤트를 감지하고, 해당 이벤트가 발생했을 때 지정한 로직을 수행.
Ex)버튼 클릭 시, 팝업 발생/마우스 오버 시 글씨 진하게 등등등...
(element의 object 중 on으로 시작하는 것들은 대부분 이벤트라고 보면 됨.)
(console.dir 로 조회한 element들의 event들)
QuerySelector나 getElement 등을 통해 이벤트 감지하고자 하는 요소를 변수에 할당한 뒤, 해당 변수에 addEventListener 등록하는 형태로 사용.
윤아 포트폴리오 개발 시 아래와 같이 사용했었음.
(햄버거 메뉴 클릭 시 모달 노출, 햄버거 버튼 숨김, 페이지 고정 등)
A 요소의 Event를 감지 시 B 요소의 상태를 변경시키는 것도 가능함.
const burgerMenu = document.querySelector('#burger-menu')
const burgerIcon = document.querySelector('#burger-icon')
burgerIcon.addEventListener('click', () => {
burgerMenu.style.top = window.pageYOffset + 'px';
burgerMenu.style.display = "flex";
burgerIcon.style.display = "none;
wholebody.classList.add('stop-scroll');2. onEventName
onClick, onMouseOver 등의 형태로 이벤트 발생 시의 동작을 추가할 수도 있음
function handleMouseEnter() {
title.innerText = "Mouse is here!";
}
title.onClick = handleMouseEnter(); addEventListener는 나중에 removeEventListener로 이벤트 제거 가능해서 더 유용함
자주 사용하는 이벤트의 종류(출처: https://kyounghwan01.github.io/blog/JS/JSbasic/addEventListener/)
click – 마우스버튼을 클릭하고 버튼에서 손가락을 떼면 발생한다.
mouseover – 마우스를 HTML요소 위에 올리면 발생한다.
mouseout – 마우스가 HTML요소 밖으로 벗어날 때 발생한다.
mousedown – 클릭을 하기 위해 마우스버튼을 누르고 아직 떼기 전인 그 순간, HTML요소를 드래그할 때 사용할 수 있다.
mouseup – 마우스버튼을 떼는 그 순간, 드래그한 HTML요소를 어딘가에 놓을 때 사용할 수 있다.
mousemove – 마우스가 움직일때마다 발생한다. 마우스커서의 현재 위치를 계속 기록하는 것에 사용할 수 있다.
focus – HTML요소에 포커스가 갔을때 발생한다.
blur – HTML요소가 포커스에서 벗어났을때 발생한다.
keypress – 키를 누르는 순간에 발생하고 키를 누르고 있는 동안 계속해서 발생한다.
keydown – 키를 누를 때 발생한다.
keyup – 키를 눌렀다가 떼는 순간에 발생한다.
load – 웹페이지에서 사용할 모든 파일의 다운로드가 완료되었을때 발생한다.
resize – 브라우저 창의 크기를 조절할때 발생한다.
scroll – 스크롤바를 드래그하거나 키보드(up, down)를 사용하거나 마우스 휠을 사용해서 웹페이지를 스크롤할 때 발생한다. 페이지에 스크롤바가 없다면 이벤트는 발생하지 않다.
unload – 링크를 클릭해서 다른 페이지로 이동하거나 브라우저 탭을 닫을 때 혹은 브라우저 창을 닫을 때 이벤트가 발생한다.
change – 폼 필드의 상태가 변경되었을 때 발생한다. 라디오 버튼을 클릭하거나 셀렉트 박스에서 값을 선택하는 경우를 예로 들수 있다.
