1️⃣ 마우스 이벤트
👉🏻 마우스의 움직임에 따라 발생하는 이벤트
| 이벤트 이름 | 설명 |
| click | 마우스를 클릭할 때 발생 |
| dbclick | 마우스를 더블클릭 할 때 발생 |
| mousedown | 마우스 버튼을 누를 때 발생 |
| mouseup | 마우스 버튼을 뗄 때 발생 |
| mouseenter | 마우스가 요소의 경계 외부에서 내부로 이동할 때 발생 |
| mouseleave | 마우스가 요소의 경계 내부에서 외부로 이동할 때 발생 |
| mousemove | 마우스를 움직일 때 발생 |
| mouseout | 마우스가 요소를 벗어날 때 발생 |
| mouseover | 마우스가 요소 안에 들어올 때 발생 |
| contextmenu | 마우스 오른쪽 버튼을 눌렀을 때 발생 |
💡 이벤트 버블링(event bubbling)
한 요소에 이벤트 발생 시 해당 요소를 감싼 부모 요소가 있다면 가장 최상단의 조상 요소를 만날 때까지 이벤트 핸들러가 반복하여 동작하는 것
💻 p태그 클릭 시 'p' 👉🏻 'div' 👉🏻 'form' 순서로 alert 창이 뜨게 됨
<form onclick="alert('form')">FORM
<div onclick="alert('div')">DIV
<p onclick="alert('p')">P</p>
</div>
</form>
💡 버블링 중단하기
event.stopPropagation() 메소드 사용하기
👉🏻 하지만 개발자 도구에서는 꼭 필요한 경우를 제외하고는 버블링을 막지 말라고 함
<body onclick="alert(`버블링은 여기까지 도달하지 못합니다.`)">
<button onclick="event.stopPropagation()">클릭해 주세요.</button>
</body>
💡 이벤트 버블링 활용하기
<body>
<div>
1
<div>
2
</div>
</div>
</body>
📍 mouseover와 mouseenter의 차이
| mouseenter | 이벤트 버블링 확률 ↓ | 마우스가 요소의 경계 외부에서 내부로 이동할 때 발생 |
| mouseover | 이벤트 버블링 확률 ↑ | 마우스가 요소 안에 들어올 때 발생 |
👉🏻 1번 div와 2번 div 차례로 마우스를 올려 놓았을 경우, mouseenter는 1번 적용되지만 mouseover는 2번 적용됨
📍 mouseleave와 mouseout의 차이
| mouseleave | 이벤트 버블링 확률 ↓ | 마우스가 요소의 경계 내부에서 외부로 이동할 때 발생 |
| mouseout | 이벤트 버블링 확률 ↑ | 마우스가 요소를 벗어날 때 발생 |
👉🏻 1번 div와 2번 div 차례로 마우스를 올려 놓았을 경우, mouseleave는 1번 적용되지만 mouseout는 2번 적용됨
2️⃣ 키보드 이벤트
👉🏻 사용자의 키보드 입력에 따라 발생하는 이벤트
| 이벤트 이름 | 설명 |
| keydown | 키보드를 누를 때 발생 |
| keypress (개발자 도구상 사용하지 말라는 권고 있음) |
키보드로 글자를 입력할 때 발생 |
| keyup | 키보드를 눌렀다가 뗄 때 발생 |
👉🏻 keypress 이벤트는 한글 입력에 사용할 수 없음 (keyup을 사용해야 함)
3️⃣ 윈도우 이벤트
👉🏻 윈도우 객체와 document 객체, img 태그 등이 사용하는 이벤트
| 이벤트 이름 | 설명 |
| read | 문서 객체가 준비되었을 때 발생 |
| load | 윈도우를 불러들일 때 발생 |
| unload | 윈도우를 닫을 때 발생 |
| resize | 윈도우의 크기가 바뀔 때 발생 |
| scroll | 윈도우를 스크롤 할 때 발생 |
| error | 윈도우에 에러가 있을 때 발생 |
📍 document와 window의 차이
👉🏻 window : 브라우저의 창
👉🏻 document: 브라우저 창의 HTML 문서 객체
📍 sns 무한 스크롤
👉🏻 페이지가 끝까지 내려갔을 때 또 다른 리스트를 로딩시켜 사용자에게 계속해서 페이지의 내용을 보여 줌
👉🏻 scroll이 끝까지 내려가면 다시 10줄을 추가하는 방식으로 무한 스크롤을 하고 싶다면?
<!DOCTYPE html>
<html>
<head>
<script>
$(document).ready(function() {
for(var i = 0; i < 20; i++) {
$("<h1>Scroll</h1>").appendTo("body");
}
$(window).scroll(function(){
var scrollHegiht = $(window).scrollTop() + $(window).height();
var documentHeight = $(document).height();
if(scrollHeight + 200 >= documentHeight){
for(var i = 0; i < 10; i++){
$("<h1>Scroll</h1>").appendTo("body");
}
}
});
});
</script>
</head>
<body>
</body>
</html>👉🏻 $(document).height() : 문서 전체의 높이
👉🏻 스크롤이 끝까지 내려가면 window 객체의 scrollTop 속성과 height 속성을 합한 값이 document 객체의 높이와 같아짐
4️⃣ 입력 양식 이벤트
👉🏻 입력 양식: <input type=" ">
| 이벤트 이름 | 설명 |
| change | 입력 양식의 내용을 변경할 때 발생 |
| focus | 입력 양식에 초점을 맞추면 발생 |
| focusin | 입력 양식에 초점이 맞춰지기 바로 전에 발생 |
| blur | 입력 양식에 초점이 사라질 때 발생 |
| select | 입력 양식을 선택할 때 발생(type: text, textarea 제외) |
| submit | submit 속성이 적용된 버튼을 누를 때 발생 |
| oninput | 입력 양식의 값이 변경될 때 |
📍 onchage와 oninput의 차이
👉🏻 onchange: input 태그의 포커스를 벗어났을 때 (입력이 끝났을 때) 이벤트 발생
👉🏻 oninput: input 태그의 값이 변경될 때마다 이벤트 발생
5️⃣ 그 외 이벤트
👉🏻 이벤트 객체: 특정 이벤트와 연관된 객체로써 해당 이벤트에 대한 상세한 정보를 담고 있음
| 이벤트 속성 | 이벤트 이름 | 설명 |
| 이벤트 객체의 속성 | target | 이벤트 타깃이 되는 객체를 가리킴 |
| screenX | 마우스 커서가 모니터 왼쪽 경계로부터 떨어진 픽셀 거리 | |
| screenY | 마우스 커서가 모니터 위쪽 경계로부터 떨어진 픽셀 거리 | |
| pageX | 마우스 커서가 창 왼쪽 경계로부터 떨어진 픽셀 거리 | |
| pageY | 마우스 커서가 창 위쪽 경계로부터 떨어진 픽셀 거리 | |
| offsetX | 마우스 커서가 요소 영역상에 위치하는 X 좌표 | |
| offsetY | 마우스 커서가 요소 영역상에 위치하는 Y 좌표 | |
| altKey | Alt키 눌러진 여부(true: 눌러짐, false: 안 눌러짐) | |
| ctrlKey | Ctrl키 눌러진 여부 | |
| shiftKey | Shift키 눌러진 여부 | |
| 이벤트 객체의 메소드 | stopProgation() | 이벤트 버블링의 정지 |
| stopimmediateProgation() | 이벤트 버블링의 정지 (같은 요소의 다른 이벤트 리스너 실행까지 멈춤) |
|
| preventDefault() | 이벤트에 대한 웹브라우저의 기본동작 취소하기 |