반응형
1. 이벤트 모델
- 이벤트를 연결하는 방법
- 모든 이벤트 모델의 이벤트 리스너는 첫번째 매개변수로 이벤트 객체를 받는다.
1) 표준이벤트 모델
- addEventListner() 메소드를 사용하는 모델, 현재 표준으로 사용하고 있어 표준 이벤트 모델이라고 부른다.
document.body.addEventListener('keyup',() => {
})
2) 고전 이벤트 모델
- 문서객체가 갖고 있는 on~으로 시작하는 속성에 함수를 할당해서 이벤트를 연결하는 방식
document.body.onkeyup = (event) => {
}
3) 인라인 이벤트 모델
- 문서객체가 갖고 있는 on~으로 시작하는 속성을 HTML 요소에 직접 넣어서 이벤트를 연결하는 것
<script>
const listener = (event) => {
}
</script>
<body onkeyup = "listener(event)">
</body>
2. 다양한 이벤트들
1) 키보드 이벤트
| 이벤트 | 설명 |
| keydown | 키가 눌릴 때 실행. 키보드를 꾹 누르고 있을때도 입력될때도 실행된다. |
| keypress | 키가 입력되었을때 실행. 종종 아시아권 문자를 제대로 처리못하는 문제가 발생한다. |
| keyup | 키보드에서 키가 떨어질때 실행 |
- 키보드 키 코드
| 이벤트 속성 이름 | 설명 |
| code | 입력한 키 |
| ketCode | 입력한 키를 나타내는 숫자 |
| altKey | Alt 키를 눌렀는지 |
| ctrlKey | Ctrl 키를 눌렀는지 |
| shiftKey | Shift 키를 눌렀는지 |
3. 이벤트를 발생 시킨 객체에 접근하는 방법
1) event.currentTarget 속성 사용
2) this 키워드 사용
4.다양한 이벤트 활용법
1) 글자입력 양식 이벤트
- 입력 양식 : 사용자로붙터 어떠한 입력을 받을 때 사용하는 요소, input, button, select 등이 해당
2) 드롭다운 목록 활용 : option 태그, multiple 속성 이용
3) 체크박스 활용 : checked 속성 이용
4) 라디오 버튼 활용 : checked 속성 이용
5. 기본 이벤트 막기
- 컨텍스트메뉴 : 오른쪽 버튼 클릭시 동작하는 메뉴
- preventDefault() 메소드를 활용해 차단시킨다.
<script>
document.addEventListener('DOMContentLoaded',() => {
const imgs = document.querySelectorAll('img')
img.forEach((img) => {
img.addEventListener('contextmenu',(event) => {
event.preventDefault()
})
})
})
</script>
<body>
<img src="http://placekitten.com/300/300 alt="">
</body>반응형
'혼공단 > 혼공단 6기' 카테고리의 다른 글
| [혼공단 6기] 혼자 공부하는 자바스크립트 5주차 후기 및 미션 인증 (0) | 2021.08.03 |
|---|---|
| 혼자 공부하는 자바스크립트 8장 - 예외처리 (0) | 2021.08.03 |
| 혼자 공부하는 자바스크립트 7장 - 문서 객체 모델(1) (0) | 2021.08.03 |
| [혼공단 6기] 혼자 공부하는 자바스크립트 4주차 후기 및 미션 인증 (0) | 2021.07.31 |
| 혼자 공부하는 자바스크립트 6장 - 객체(2) (0) | 2021.07.31 |