다양한 이벤트
마우스 이벤트
| 이벤트 타입 | 설명 |
|---|---|
| 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 | 윈도우 사이즈를 움직일 때 발생 |
이벤트 핸들러
등록하기
Element.addEventListener('type', 'handler')를 통해서 이벤트 핸들러를 등록
삭제하기
Element.removeEventListner('type', 'handler')를 통해서 이벤트 핸들러를 삭제
이벤트를 삭제할 때 등록했던 핸들러를 그대로 전달해야 된다
Element.addEventListener('type', function() {
console.log('이벤트1')
});
Element.removeEventListner('type', function() {
console.log('이벤트1')
});위코드는 핸들러를 등록하고 삭제할거 같지만 서로 다른 함수이기 때문에 삭제가 되지않는다
핸들러를 삭제할 때 외부에 함수를 만들어서 해당 함수 이름으로 핸들러로 전달해 주자
이벤트 객체 (Event Object)
이벤트가 발생하면 이벤트 핸들러의 첫 번째 파라미터에는 자동으로 이벤트 객체가 전달된다
function printEvent(e) {
console.log(e)
};
Element.addEventListener('type', printEvent);이벤트 객체는 이벤트 종류마다 가지고 있는 프로퍼티가 다르며, 이벤트에 대한 유용한 정보들을 프로퍼티로 가지고 있다
type, target 프로퍼티는 자주 사용된다
type : 발생한 이벤트의 타입
tatget : 이벤트가 발생한 해당 요소를 담고 있다
- dom 요소가 담겨있다
- 이벤트가 발생했을 때 해당 요소를 수정하거나 그 요소가 가지고 있는 속성값들을 참조할 때 유용
공통 프로퍼티
이벤트 타입과 상관없이 모든 이벤트 객체들이 공통적으로 가지고 있는 프로퍼티
| 프로퍼티 | 설명 |
|---|---|
| type | 이벤트 이름 ('click', 'mouseup', 'keydown' 등) |
| target | 이벤트가 발생한 요소 |
| currentTarget 이벤트 핸들러가 등록된 요소 | |
| timeStamp | 이벤트 발생 시각(페이지가 로드된 이후부터 경과한 밀리초) |
| bubbles | 버블링 단계인지를 판단하는 값 |
마우스 이벤트
| 프로퍼티 | 설명 |
|---|---|
| button | 누른 마우스의 버튼 (0: 왼쪽, 1: 가운데(휠), 2: 오른쪽) |
| clientX, clientY | 마우스 커서의 브라우저 표시 영역에서의 위치 |
| pageX, pageY | 마우스 커서의 문서 영역에서의 위치 |
| offsetX, offsetY | 마우스 커서의 이벤트 발생한 요소에서의 위치 |
| screenX, screenY | 마우스 커서의 모니터 화면 영역에서의 위치 |
| altKey 이벤트가 발생할 때 alt키를 눌렀는지 | |
| ctrlKey | 이벤트가 발생할 때 ctrl키를 눌렀는지 |
| shiftKey | 이벤트가 발생할 때 shift키를 눌렀는지 |
| metaKey | 이벤트가 발생할 때 meta키를 눌렀는지 (window는 window키, mac은 cmd키) |
키보드 이벤트
| 프로퍼티 | 설명 |
|---|---|
| key | 누른 키가 가지고 있는 값 |
| code | 누른 키의 물리적인 위치 |
| altKey | 이벤트가 발생할 때 alt키를 눌렀는지 |
| ctrlKey | 이벤트가 발생할 때 ctrl키를 눌렀는지 |
| shiftKey | 이벤트가 발생할 때 shift키를 눌렀는지 |
이벤트 버블링 (Event Bubbling)
어떤 요소에서 이벤트가 발생하면 해당 요소에 등록된 이벤트 핸들러가 동작하는 것뿐만 아니라 부모 요소로 이벤트가 계속해서 전파되면서 각 요소에도 등록된 이벤트 핸들러가 있다면 차례로 이벤트 핸들러가 동작한다
자식 요소에서 부모 요소로 이벤트가 전파되는 것을 이벤트 버블링(Event Bubbling)이라고 부른다
이벤트 버블링은 이벤트 객체의 stopPropagation 메소드로 전파를 막을 수 있다
캡처링(capturing)
이벤트가 하위 요소로 전파되는 단계
자바스크립트 이벤트 순서
addEventListner에 캡쳐링 단계 적용하기
이벤트 위임 (Event Delegation)
새로운 아이템을 추가하게 되면 기존에 있던 이벤트 핸들러가 동작하지 않는다. 매번 새로운 이벤트 핸들러를 등록해야하는 문제가 생긴다. 이벤트 버블링을 활용하면 간단하게 해결이 가능하다.
버블링 개념에 따르면 부모요소가 자식 요소에서 발생한 이벤트를 감지할 수 있고 이벤트 객체에 target 프로퍼티가 항상 이벤트 발생 위치를 담고있기 때문에 부모 요소인 리스트에 이벤트 핸들러를 등록하면 모든 자식 요소를 다룰수 있다.
이렇게하면 나중에 추가할 아이템에 이벤트 핸들러를 추가하지 않아도 핸들러가 잘 작동한다
자식 요소에서 발생하는 이벤트를 부모 요소에서 다루는 방식을 이벤트 위임이라고 한다.
preventDefault 메소드
브라우저의 기본동작 체크박스를 체그하거나 마우스 우클릭을 하여 복사하거나,
input 태그에 커서를 두고 키보드 키를 누르면 해당 값이 입력된다거나
이러한 동작들을 막고 싶다면 이벤트 객체의 preventDefault 메소드를 통해 막을 수가 있다.
참고
코드잇
