✅ 브라우저 이벤트란?
(작성에 앞서 모든 글을 구글링하여 참고하여 공부하고자 쓴 글이오니 참고부탁드립니다.😅)
- 이벤트(Event)란 사전적 의미로는 (특히 중요한) 사건[일], 행사 등을 의미한다.
하지만, 브라우저에서의 이벤트란 어떤 웹페이지에서 버튼이 있다고 가정하고 클릭하였을 때 어떤 웹페이지가 로드되었을 때와 같은 현상을 말하는데 이것은 DOM(Document Object Model) 요소와 관련이 있다. 이를 실행하면 그에 맞는 반응을 보인다.
그리고 이벤트는 일반적으로 함수에 연결되며 함수는 이벤트가 발생하기 전에는 실행되지 않다가 이벤트가 발생되면 실행된다. 이 함수를 이벤트 핸들러라고 하며 이벤트에 대응하는 처리를 기술한다.
✅ 자바스크립트 이벤트 종류
🔵 UI EVENT
Event | Description |
load | 웹페이지나 스크립트의 로드가 완료되었을 때 |
unload | 웹이지가 언로드될 떄(주로 새로운 페이지를 요청한 경우) |
error | 브라우저가 자바스크립트 오류를 만나썩나 요청한 자원이 존재하지 않는 경우 |
resize | 브라우저 창의 크기를 조절했을 때 |
scroll | 사용자가 페이지를 위아래로 스크롤할 때 |
select | 텍스트를 선택했을 때 |
🟣 Keyboard Event
Event | Description |
Keydown | 키를 누르고 있을 때 |
Keyup | 누르고 있던 키를 뗄 때 |
Keypress | 키를 누르고 뗏을 때 |
KeyCode | 키 코드 값 |
🟢 Mouse Event
Event | Description |
Click | 마우스 버튼 클릭했을 때 |
Dbclick | 마우스 버튼 더블 클릭했을 때 |
Mousedown | 마우스 버튼을 누르고 있을 때 |
Mouseup | 누르고 있던 마우스 버튼을 뗄 때 |
Mousemove | 마우스를 움직일 때 (터치스크린에서 동작하지 않는다) |
Mouseover | 마우스를 요소 위로 움직였을 때(터치스크린 작동 X) |
Mouseout | 마우스를 요소 밖으로 움직였을 때(터치스크린 작동X) |
Mouserenter | 해당 요소에 마우스 커서를 올렸을 때 |
Mouseleave | 해당 요소에 마우스 커서를 뺏을 때 |
🟤 Form Event
Event | Description |
Input | input 또는 textarea 요소의 값이 변경되었을 때 |
Change | select box, check box, radio button 등의 상태가 변경되었을 때 |
Submit | form을 submit할 때(버튼 또는 키) |
Reset | reset 버튼을 클릭할 때 |
✅ 이벤트 핸들러 등록 방법
📝 inline방식
인라인 방식은 이벤트를 이벤트 대상의 태그 속성으로 지정하는 방법 중 하나이다.
이벤트가 발생한 대상을 필요로하는 경우 'this'를 통해서 참조 가능
script에서 함수를 만들고 이벤트를 실행하는 방법도 있다.
✅ addEventListener 방식
addEventListener 메소드를 이용하여 대상 DOM 요소에 이벤트를 바인딩하고 해당 이벤트가 발생했을 때 실행될 콜백 함수(이벤트 핸들러)를 지정한다.
📝 addEventListener 특징
- 하나의 이벤트에 대해 하나 이상의 이벤트 핸들러를 추가할 수 있다.
- HTML 요소뿐만아니라 모든 DOM 요소(HTML, XML, SVG)에 대해 동작한다. 브라우저는 웹 문서(HTML, XML, SVG)를 로드한 후, 파싱하여 DOM을 생성한다.
📝 Event 객체 속성 종류
📌 Event.target: 실제로 이벤트를 발생 시킨 요소를 가리킨다.
📌 Event.currentTarget: 코드에서 이벤트에 바인딩된 DOM 요소를 가리킨다. 즉, addEventListener 앞에 객체 를 말한다. 따라서 이벤트 핸들러 함수 내에서 currentTarget과 this는 언제나 일치한다.
📌 Event.type: 발생한 이벤트의 종류를 나타내는 문자열을 반환한다.
📌 Event.eventPhase: 이벤트 흐름 상에서 어느 단계에 있는지를 반환한다.(ex. 0~3)
'Language > JavaScript' 카테고리의 다른 글
정규표현식(Regular Expression) (0) | 2023.12.12 |
---|---|
[Javascript] LocalStorage (0) | 2023.12.06 |
프로토타입(Prototype) (0) | 2023.09.09 |
Class(생성자 함수, 객체 생성 방식) (0) | 2023.09.02 |
조건문(if, if...else, switch) (0) | 2023.08.31 |