💭이벤트(Event)란?
- 사용자의 동작 혹은 프로그램에서 발생하는 특정한 상황을 의미
- 자바스크립트는 이벤트에 반응하여 특정 동작을 수행할 수 있음
이벤트 종류
HTML에서 발생하는 이벤트는 주로 마우스 및 입력양식에서 발생하며 문서의 로딩과 관련한 특별한 이벤트도 포함됨
| 종류 | 이벤트명 | 설명 |
|---|---|---|
| click | 클릭시 발생 | |
| 마우스 | mousedown | 마우스를 클릭 했을때 발생 |
| mouseup | 마우스에서 손을 땟을때 발생 | |
| mousemove | 마우스가 움직였을 때 발생 | |
| mouseout | 마우스가 특정 객체 밖으로 나갔을 때 발생 | |
| 키보드 | keyrpess | 키를 누르고 있을때 발생 |
| keyup | 키에서 손을 땟을때 발생 | |
| keydown | 키를 눌렀을때 발생 | |
| 폼 | focus | 포커스를 얻었을때 발생 |
| blur | 포커스를 잃었을때 발생 | |
| change | 변동이 있을시 발생 | |
| submit | 폼을 전송 했을시 발생 | |
| 문서 | load | 문서의 로드가 완료 되었을때 발생 |
💭이벤트 객체(Event Object)란?
- 이벤트 리스너 함수에 넘겨지는 인수(매개변수)를 의미
- event, e, ev 등으로 표시
- 특정 이벤트와 연관된 객체로써, 이벤트 핸들러에 전달되는 이벤트에 대한 상세한 정보를 담고 있음
이벤트 객체의 주요 속성
1) 일반
| 속성 | 설명 |
|---|---|
| type | 발생한 이벤트의 종류를 나타내는 문자열을 반환 |
| target | 실제로 이벤트를 발생시킨 요소를 가리킴 |
| currentTarget | 이벤트에 바인딩된 DOM 요소를 가리킴 |
2) 좌표
| 속성 | 설명 |
|---|---|
| screenX, Y | 마우스 포인터가 모니터 경계로부터 떨어진 픽셀 거리 |
| pageX, Y | 스크롤 축의 이동거리를 기준으로 한 포인터의 좌표값 |
| clientX, Y | 마우스 포인터의 브라우저 표시 영역 상의 좌표값 |
3) 키보드, 마우스
| 속성 | 설명 |
|---|---|
| mouse | 마우스 눌러진 버튼 (좌측 버튼 : 0, 가운데 : 1, 우측 : 2) |
| key | 눌린 키의 값 |
| altKey | Alt 키 눌려진 여부 (true : 눌려짐, false : 안 눌려짐) |
| ctrlKey | Ctrl 키 눌려진 여부 |
| shiftKey | 시프트 키 눌려진 여부 |
이벤트 객체의 주요 메소드
| 메소드 | 설명 |
|---|---|
| preventDefault() | 이벤트에 대한 웹브라우저의 기본동작 취소 |
| 주로 링크를 클릭했을 때 새롱누 페이지로 이동(a태그)하거나 | |
| 폼을 제출했을 때 페이지가 리로드(form태그) 되는 동작을 막기 위해 사용 |
💭이벤트 핸들러(Event Handler)
- 이벤트가 발생했을 때 그 처리를 담당하는 실행 함수
- 이벤트 핸들러 함수가 연결된 특정 요소에서 지정된 타입의 이벤트가 발생하면, 웹 브라우저는
이벤트 리스너에 연결된 이벤트 핸들러를 실행 - 이벤트 핸들러 함수는
이벤트 객체를 인수로 전달 받을 수 있는데 이를 이용하여 이벤트의 성질을 결정하거나, 이벤트의 기본 동작을 막을 수 있음
💭이벤트 리스너(Event Listener)
- 특정한 이벤트에 대해 일어날 동작을 정의할 수 있음
- 지정된 타입의 이벤트가 특정 요소에서 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킴
| 이벤트 | 이벤트속성(이벤트 리스너) | 이벤트 핸들러 |
|---|---|---|
| click | onclick | function(){} |
💭이벤트 전파(Event Propagation)
이벤트 버블링(Event Bubbling)
- 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 트리 구조상으로 한 단계 위에 있는 상위의 화면 요소들로 전달되어 가는 특성을 의미
- 최상위 요소인 body 태그까지 이벤트가 전달
이벤트 캡쳐링(Event Capturing)
- 버블링과 반대로 이벤트가 상위 요소에서 하위 요소로 전파되는 방식
- 이벤트는 최상위 요소에서 시작하여 점점 내부로 전달되며, 최종적으로 타겟 요소에 도달
- 캡쳐링은 기본적으로 비활성화되어 있으며, 'addEventListener()'에서 'capture' 옵션을 통해 활성화
▶이미지 출처: https://joshua1988.github.io/web-development/javascript/event-propagation-delegation
이벤트 위임(Event Delegation)
- 버블링을 활용하는 일반적인 패턴
- 여러 하위 요소에 개별적으로 이벤트 리스너를 추가하는 대신, 상위 요소에 단 하나의 이벤트 리스너를 추가하여 모든 하위 요소의 이벤트를 관리하는 방법
💭이벤트 등록 방법
1. HTML에서 이벤트 등록
- HTML 태그의 속성에 이벤트 핸들러를 기술하여 이벤트 속성을 추가하는 방식
- 이벤트명 앞에 on 접두사를 붙여 사용
- 속성에 자바스크립트 코드를 직접 작성하거나 이벤트 처리를 위해 구현한 함수를 호출
📌예시1
<button onclick="alert('클릭')">버튼</button>📌예시2
<button onclick="test()">버튼</button>
<script>
function test() {
alert('클릭');
}
</script>2. JS onclick 속성 추가
- HTML과 분리하여 스크립트 코드에서 DOM 객체의 속성을 이용하는 방식
- 대상 DOM 요소에 on 접두사를 붙인 이벤트명으로 이벤트 핸들러 속성을 설정하고 이벤트 발생시 처리할 함수를 등록
📌예시
<button>버튼</button>
<script>
const Btn = document.querySelector('button');
Btn.onclick = function () {
alert('클릭');
}
</script>3. addEventListener() 메소드
이미지 출처: https://poiemaweb.com/js-event
- addEventListener() 메소드를 이용하여 대상 DOM 요소에 이벤트를 설정하고 해당 이벤트가 발생했을 때 실행될 이벤트 핸들러를 등록
- 앞선 두 가지 방식은 각 요소에 이벤트 타입별로 하나의 이벤트 핸들러만 연결할 수 있는 반면, addEventListener() 메소드 방식은 여러 개의 이벤트 핸들러를 연결할 수 있음
- 이전에 추가한 이벤트 핸들러를 제거하는 removeEventListener()라는 대응 관계에 있는 함수가 제공됩니다.
📌예시
<button>버튼</button>
<script>
const Btn = document.querySelector('button');
Btn.addEventListener("click", function() {
alert('클릭');
});
</script>
#html #css #javascript