티스토리 뷰

Web/JS

JS - 이벤트

Codecheck 2024. 2. 23. 16:57

이벤트 : 웹 브라우저와 사용자 사이에 상호작용이 발생하는 특정 시점

중요 이벤트 종류

구분 이벤트 설명
마우스 이벤트  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
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG
more
«   2025/09   »
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
글 보관함