티스토리 뷰
이벤트 : 웹 브라우저와 사용자 사이에 상호작용이 발생하는 특정 시점
중요 이벤트 종류
구분 | 이벤트 | 설명 |
마우스 이벤트 | onClick | 마우스로 클릭 |
ondblclick | 마우스로 빠르게 두 번 클릭 | |
onmouseover | 마우스 포인터를 올리면 발생 | |
onmouseout | 마우스 포인터가 빠져나가면 발생 | |
onmousemove | 마우스 포인터가 움직이면 발생 | |
onwheel | 마우스 휠을 움직이면 발생 | |
키보드 이벤트 | onkeypress | 키보드 버튼을 누르고 있는 동안 발생 |
onkeydown | 키보드 버튼을 누른 순간 발생 | |
onkeyup | 키보드 버튼을 눌렀다가 뗀 순간 발생 | |
포커스 이벤트 | onfocus | 요소에 포커스가 되면 발생 |
onblur | 요소가 포커스를 잃으면 발생 | |
폼 이벤트 | onsubmit | 폼이 전송될 때 발생 |
리소스 이벤트 | onload | 웹 브라우저의 리소스 로드가 끝나면 발생 |
다른 이벤트들 ↓
Event - Web APIs | MDN (mozilla.org)
Event - Web APIs | MDN
The Event interface represents an event which takes place in the DOM.
developer.mozilla.org
이벤트 등록
1. inline 방식
ex. <button onmouseover="mouseEvent()">마우스</button>
여러 이벤트 조건 동시에 가능
2. property 방식 - 노드를 찾아서 그 노드에 속성을 직접 등록하는 방법
ex.
const btnEl = document.querySelector("button");
btnEl.onclick = function(){
console.log('click event');
}
또는
btnEl.onclick = clickEvent;
function clickEvent(){
console.log('focus event')
}
3. 이벤트 등록 메서드
addEventListener 활용 이벤트명에서 on부분을 빼고 사용해야함
ex.
const btnEl = document.querySelector("button");
btnEl.addEventListener("click", function(){
console.log('click event');
})
이벤트 객체 : 이벤트의 종류에 따라서 발생되는 그 고유의 이벤트의 정보들을 담고있는 하나의 객체
btnEl.addEventListener("click", (e)=>{});
이벤트 취소
const aEl = document.querySelector("a");
aEl.addEventListener("click", (e)=>{
e.preventDefault();
})
this키워드 → 이벤트가 발생한 대상 노드를 가리킴
주의 : 화살표 함수 사용 시 화살표 함수 내부의 this는 대상 노드를 가르키지 않음
→ e.target으로 우회 필요
'Web > JS' 카테고리의 다른 글
JS - 문서 객체 모델, DOM (0) | 2024.02.21 |
---|---|
JS - 브라우저 객체 모델 (0) | 2024.02.20 |
JS - 표준 내장 객체 (0) | 2024.02.20 |
JS - 객체 (0) | 2024.02.20 |
JS - 함수2 (0) | 2024.02.20 |