학습 목표
1. HTML 요소에 이벤트 등록하기
2. 이벤트 등록 및 이벤트 핸들러 처리 ( C R U D )
1. HTML 요소에 이벤트 등록하기
자바스크립트 이벤트는 웹 페이지에서 발생하는 다양한 동작이나 발생 상황을 나타냅니다. 이런 이벤트를 활용하여 사용자의 행동에 반응하는 동적인 웹 페이지를 만들 수 있습니다. 예를 들어, 사용자가 버튼을 클릭할 때 메시지가 나타나게 하거나, 마우스를 웹 페이지의 특정 부분에 올렸을 때 스타일이 변경되게 할 수 있습니다.
이벤트를 활용하려면, 먼저 HTML 요소에 이벤트를 등록해야 합니다.
이벤트 등록에 대표적인 3가지 방식
- Inline Event Handler : HTML 요소 내부에 직접 이벤트를 등록합니다.
- Element Property : 자바스크립트에서 HTML 요소의 프로퍼티로 이벤트를 등록합니다.
- addEventListener() 메서드 : 가장 권장되는 방식으로, 여러 이벤트 리스너를 동일한 요소에 추가할 수 있습니다.
1. Inline Event Handler
HTML 요소 내부에 직접 이벤트를 등록하는 방식입니다.
<button onclick="alert('Inline Event Handler!')">Click me!</button>
| 이벤트 핸들러란 무슨말일까? 이벤트 핸들러는 특정 이벤트가 발생했을 때 실행되는 함수 또는 메서드를 말합니다. 즉, 이벤트 핸들러는 특정 이벤트가 일어났을 때 어떤 동작이 실행될지를 정의하고, 이벤트가 발생하면 그에 따라 코드를 실행합니다. |
2. Element Property
자바스크립트에서 HTML 요소의 프로퍼티로 이벤트를 등록하는 방식입니다.
3. addEventListener() 메서드
addEventListener() 메서드를 사용하여 이벤트 핸들러를 등록하는 방식입니다. 이 방식은 여러 이벤트 리스너를 동일한 요소에 추가할 수 있습니다.
이 방법은 HTML과 JavaScript 코드를 분리하여 유지 보수를 쉽게 할 수 있습니다. addEventListener() 메서드는 이벤트 이름과 이벤트 핸들러 함수를 인자로 받습니다
| 1. click : 요소를 클릭할 때 발생합니다. 2. dblclick : 요소를 더블 클릭할 때 발생합니다. 3. mousedown : 요소에서 마우스 버튼이 눌릴 때 발생합니다. 4. mouseup : 요소에서 마우스 버튼이 떼어질 때 발생합니다. 5. mousemove : 요소에서 마우스가 움직일 때 발생합니다. 6. mouseover : 요소에 마우스 커서가 올라갈 때 발생합니다. 7. mouseout : 요소에서 마우스 커서가 벗어날 때 발생합니다. 8. keydown : 키보드에서 키를 누를 때 발생합니다. 9. keyup : 키보드에서 키를 뗄 때 발생합니다. 10. submit : 폼을 제출할 때 발생합니다. 11. change : 요소의 값이 변경될 때 발생합니다. 12. load : 웹 페이지나 이미지 등이 로딩되었을 때 발생합니다. |
2. 이벤트 등록 및 이벤트 핸들러 처리
실습 예제 - 1 (노드 숨기기,보이기)
| display: none과 visibility: hidden은 모두 HTML 요소를 숨기는 방법이지만, 그들 사이에는 몇 가지 중요한 차이점이 있습니다. |
1. 공간 차지
- display: none:
- 요소를 완전히 숨기며, 요소가 차지하던 공간도 제거됩니다.
- 즉, 화면에서 요소가 완전히 사라지고, 그 자리를 다른 요소들이 차지할 수 있게 됩니다.
- visibility: hidden:
- 요소는 화면에서 보이지 않지만, 요소가 차지하던 공간은 유지됩니다.
- 즉, 요소가 보이지 않게 되지만, 그 자리는 계속 차지하고 있어서 페이지 레이아웃에 영향을 주지 않습니다.
2. 이벤트 발생
- display: none:
- 요소가 완전히 비활성화되어, 이벤트를 발생시킬 수 없습니다.
- visibility: hidden:
- 이벤트는 발생하지 않지만, 만약 자식 요소가 **visibility: visible**로 설정되어 있다면, 자식 요소에서는 이벤트가 발생할 수 있습니다.
| /* display: none은 요소를 완전히 제거하므로 영역도 차지하지 않습니다. */ .display-none { display: none; } /* visibility: hidden은 요소를 보이지 않게 하지만 영역은 차지하고 있습니다. */ .visibility-hidden { visibility: hidden; } |
실습 예제 - 3 ( 노드 생성하기)
: 추가적으로 prepend, before, after 함수를 상황에 맞게 활용할 수 있습니다.
실습 예제 - 3 ( 노드 삭제하기)
'JavaScript' 카테고리의 다른 글
| JS 이벤트 처리 - 8(Ajax Fetch) (0) | 2023.10.10 |
|---|---|
| JS 이벤트 처리 - 7(Promise) (0) | 2023.10.10 |
| JS - 점검 6(웹 페이지 렌더링 과정) (1) | 2023.10.05 |
| JS - 점검 5(Browser Object Model) (0) | 2023.10.05 |
| JS - 점검 4(Document Object Model) (1) | 2023.10.04 |
