일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 | 31 |
- this
- 코멘토 #코멘토실무PT #실무PT후기 #실무강의 #리액트강의 #웹프로그래밍 #react #웹개발실무
- NestJS
- 모던 자바스크립트
- oauth
- 스프링부트
- compateto
- concurrency limit
- AWS
- bucket4j
- 딥다이브
- TypeORM
- 프리코스
- 음악 url 파일 다운로드
- 프로그래머스
- 파일 url
- 검색
- 유효시간 설정 url
- invalid_grant
- 우아한테크코스
- api 요청 수 제한
- 우아한 테크코스
- Dev-Matching
- 타입스크립트
- api 비동기처리
- 프론트엔드 과제
- 프론트엔드
- Deep Dive
- redis
- 자바스크립트
- Today
- Total
개발 알다가도 모르겠네요
다양한 이벤트를 알아보자. 본문
1. 이벤트 핸들러 등록하기
HTML의 속성이나 DOM 프로퍼티를 활용해 이벤트를 등록하는 방법 외에
Element.addEventListener('type', 'handler')를 통해서 이벤트 핸들러를 등록할 수 있습니다.
2. 이벤트 핸들러 삭제하기
addEventListener 메소드를 활용해서 이벤트 핸들러를 등록했다면,
Element.removeEventListner('type', 'handler')를 통해서 이벤트 핸들러를 삭제할 수 있습니다.
3. 이벤트 객체 (Event Object)
이벤트가 발생하면 이벤트 핸들러의 첫 번째 파라미터에는 자동으로 이벤트 객체가 전달됩니다.
이벤트 객체는 이벤트 종류마다 가지고 있는 프로퍼티가 다르며, 이벤트에 대한 유용한 정보들을 프로퍼티로 가지고 있습니다.
4. 이벤트 버블링 (Event Bubbling)
이벤트는 전파가 됩니다. 어떤 요소에서 이벤트가 발생하면 해당 요소에 등록된 이벤트 핸들러가 동작하는 것뿐만 아니라 부모 요소로 이벤트가 계속해서 전파되면서 각 요소에도 등록된 이벤트 핸들러가 있다면 차례로 이벤트 핸들러가 동작하는데요.
자식 요소에서 부모 요소로 이벤트가 전파되는 것을 이벤트 버블링(Event Bubbling)이라고 부릅니다.
참고로 이벤트 버블링은 이벤트 객체의 stopPropagation 메소드로 전파를 막을 수 있습니다.
5. 이벤트 위임 (Event Delegation)
버블링 개념을 활용하면 훨씬 효과적인 이벤트 관리를 할 수 있습니다. 예를 들어 자식 요소 각각에 이벤트 핸들러를 하나씩 등록할 필요 없이 부모 요소에서 한 번에 자식 요소들에 발생한 이벤트를 관리할 수도 있는데요.
이렇게 이벤트를 다루는 방식을 자식 요소의 이벤트를 부모 요소에 위임한다고 해서 이벤트 위임(Event Delegation)이라고 부릅니다.
이벤트 위임을 잘 활용하면 훨씬 더 효율적으로 이벤트를 다룰 수 있습니다.
6. 브라우저의 기본 동작
브라우저에는 각 태그별 혹은 상황별로 기본적으로 약속된 동작들이 있습니다.
예를 들어 마우스 오른쪽 버튼을 클릭하면 상황에 맞는 메뉴 창이 뜬다거나, input 태그에 커서를 두고 키보드 키를 누르면 해당 값이 입력된다거나..
그런데 만약 이러한 동작들을 막고 싶다면 이벤트 객체의 preventDefault 메소드를 통해 막을 수가 있습니다.
하지만 각 HTML 태그들이 가지고 있는 고유한 역할과 의미를 훼손하게 될 수도 있기 때문에 꼭 필요한 경우에만 주의해서 사용해야 합니다.
마우스 이벤트
mousedown | 마우스 버튼을 누르는 순간 |
mouseup | 마우스 버튼을 눌렀다 떼는 순간 |
click | 왼쪽 버튼을 클릭한 순간 |
dblclick | 왼쪽 버튼을 빠르게 두 번 클릭한 순간 |
contextmenu | 오른쪽 버튼을 클릭한 순간 |
mousemove | 마우스를 움직이는 순간 |
mouseover | 마우스 포인터가 요소 위로 올라온 순간 |
mouseout | 마우스 포인터가 요소에서 벗어나는 순간 |
mouseenter | 마우스 포인터가 요소 위로 올라온 순간 (버블링이 일어나지 않음) |
mouseleave | 마우스 포인터가 요소에서 벗어나는 순간 (버블링이 일어나지 않음) |
키보드 이벤트
keydown | 키보드의 버튼을 누르는 순간 |
keypress | 키보드의 버튼을 누르는 순간 ('a', '5' 등 출력이 가능한 키에서만 동작하며, Shift, Esc 등의 키에는 반응하지 않음) |
keyup | 키보드의 버튼을 눌렀다 떼는 순간 |
포커스 이벤트
focusin | 요소에 포커스가 되는 순간 |
focusout | 요소로부터 포커스가 빠져나가는 순간 |
focus | 요소에 포커스가 되는 순간 (버블링이 일어나지 않음) |
blur | 요소로부터 포커스가 빠져나가는 순간 (버블링이 일어나지 않음) |
입력 이벤트
change | 입력된 값이 바뀌는 순간 |
input | 값이 입력되는 순간 |
select | 입력 양식의 하나가 선택되는 순간 |
submit | 폼을 전송하는 순간 |
스크롤 이벤트
scroll | 스크롤 바가 움직일 때 |
윈도우 창 이벤트
resize | 윈도우 사이즈를 움직일 때 발생관련 질문 |
1. 공통 프로퍼티
아래의 프로퍼티들은 이벤트 타입과 상관없이 모든 이벤트 객체들이 공통적으로 가지고 있는 프로퍼티입니다.
type | 이벤트 이름 ('click', 'mouseup', 'keydown' 등) |
target | 이벤트가 발생한 요소 |
currentTarget | 이벤트 핸들러가 등록된 요소 |
timeStamp | 이벤트 발생 시각(페이지가 로드된 이후부터 경과한 밀리초) |
bubbles | 버블링 단계인지를 판단하는 값 |
2. 마우스 이벤트
마우스와 관련된 이벤트의 경우에는 아래와 같은 이벤트 객체의 프로퍼티들을 가지고 있습니다.
button | 누른 마우스의 버튼 (0: 왼쪽, 1: 가운데(휠), 2: 오른쪽) |
clientX, clientY | 마우스 커서의 브라우저 표시 영역에서의 위치 |
pageX, pageY | 마우스 커서의 문서 영역에서의 위치 |
offsetX, offsetY | 마우스 커서의 이벤트 발생한 요소에서의 위치 |
screenX, screenY | 마우스 커서의 모니터 화면 영역에서의 위치 |
altKey | 이벤트가 발생할 때 alt키를 눌렀는지 |
ctrlKey | 이벤트가 발생할 때 ctrl키를 눌렀는지 |
shiftKey | 이벤트가 발생할 때 shift키를 눌렀는지 |
metaKey | 이벤트가 발생할 때 meta키를 눌렀는지 (window는 window키, mac은 cmd키) |
3. 키보드 이벤트
마우스와 관련된 이벤트의 경우에는 아래와 같은 이벤트 객체의 프로퍼티들을 가지고 있습니다.
key | 누른 키가 가지고 있는 값 |
code | 누른 키의 물리적인 위치 |
altKey | 이벤트가 발생할 때 alt키를 눌렀는지 |
ctrlKey | 이벤트가 발생할 때 ctrl키를 눌렀는지 |
shiftKey | 이벤트가 발생할 때 shift키를 눌렀는지 |
metaKey | 이벤트가 발생할 때 meta키를 눌렀는지 (window는 window키, mac은 cmd키) |
'웹 > Javascript' 카테고리의 다른 글
WEB API를 간단하게 알아보자 (0) | 2021.07.20 |
---|---|
JSON을 간단하게 알아보자 (0) | 2021.07.20 |
다양한 마우스 이벤트를 알아보자. (0) | 2021.07.06 |
DOM을 간단하게 알아보자. (0) | 2021.07.05 |
inner/outerHTML, textContent 비교 (0) | 2021.07.05 |