- 사용자가 버튼을 클릭했을 때 일어나는 사건 같은 것이다.
- 이벤트 핸들 : 이벤트가 발생되면 실행되는 함수를 의미한다.
(1) 이벤트의 종류
- UI Event :
- load : 웹페이지의 로드가 완료되었을 때
- upload : 웹페이지가 언로드 될 때
- error : 요청한 자원이 존재하지 않거나 오류가 났을 때
- resize : 창의 크기를 조절했을 때
- scroll : 웹페이지를 위아래로 스크롤 할 때
- select : 텍스트를 선택했을 떄
- keyboard Event
- keydown : 키를 누르고 있을 때
- keyup : 누르고 있던 키를 뗄 때
- keypress : 키를 누르고 뗄 때
- Mouse Event
- click : 마우스 버튼을 클릭했을 때
- dbclick : 마우스 버튼을 더블 클릭했을 때
- mousedown : 마우스 버튼을 누르고 있을 때
- mouseup : 누르고 있던 마우스 버튼을 뗄 때
- mousemove : 마우스를 움직일 때
- mouseover : 마우스를 요소 위로 움직였을 때
- mouseout : 마우스를 요소 밖으로 움직였을 때
- Focus Event
- focus/focusin : 요소가 포커스를 얻었을 때
- blur/focusout : 요소가 포커스를 잃었을 때
- Form Event
- input : input 또는 textarea 요소의 값이 변경되었을 때
- change : select box, checkbox, radio button의 상태가 변경되었을 때
- submit : form을 submit 할 때 (버튼 또는 키)
- resrt : reset 버튼을 클릭할 때
- Clipboard Event
- cut : 콘텐츠를 잘라내기 할 때
- copy : 콘텐츠를 복사할 때
- paste : 콘텐츠를 붙여 넣기 할 때
(2) 이벤트 핸들러 등록
- 인라인 이벤트 핸들러 방식 : 이벤트 핸들러 어트리뷰트에 등록하는 것이다. HTML과 JavaScript가 뒤섞일 수 있다.
<!DOCTYPE html>
<html>
<body>
<button onclick="a()">Click me</button>
<script>
function a() {
alert('click');
}
</script>
</body>
</html>- 이벤트 핸들러 프로퍼티 방식
- addEventListener 메서드 방식
<!DOCTYPE html>
<html>
<body>
<button class="btn" id="a">Click me</button>
<script>
const btn = document.getElementById('a');
a.onclick = function () {
alert('이벤트 핸들러 방식');
};
a.addEventListener('click', function () { // addEventListener 메소드 방식
alert('addEventListener');
});
</script>
</body>
</html>(2) 이벤트의 흐름
- HTML 요소에 이벤트가 발생할 경우 연쇄적 반응(버블링, 캡처링)이 일어난다.
- 버블링(Event Bubbling) : 자식 요소에서 발생한 이벤트를 부모 요소로 전파되는 것이다.
- 캡처링(Capturing) : 부모 요소부터 시작해서 이벤트를 발생시킨 자식 요소까지 도달하는 것이다.
- 캡처링 → 버플링 순서로 발생한다. 하나만 발생하는 것이 아니다.
- addEventListener 메서드의 세 번째 매개변수에 true를 설정하면 캡처링을 캐치하고 false로 하면 버블링을 캐치한다.
(3) 이벤트 프로퍼티
- .target : 실제로 이벤트를 발생시킨 요소를 가리킨다.
- .curremtTarget : 이벤트에 바인딩된 DOM요소를 가리킨다. 즉, addEventListener 앞에 기술된 객체를 가리킨다.
<!DOCTYPE html>
<html>
<body>
<div class="container">
<button id="btn1">Hide me 1</button>
<button id="btn2">Hide me 2</button>
</div>
<script>
function hide(e) {
e.target.style.visibility = 'hidden';
// 동일하게 동작한다.
// this.style.visibility = 'hidden';
console.log('e.currentTarget: ', e.currentTarget); // <button id="btn1" style="visibility: hidden;">Hide me 1</button>
}
document.getElementById('btn1').addEventListener('click', hide);
document.getElementById('btn2').addEventListener('click', hide);
</script>
</body>
</html>- .type : 발생한 이벤트의 종류를 나타내는 문자열을 반환한다.
- .keyCode : 누른 키의 코드를 반환한다.
<!DOCTYPE html>
<html>
<body>
<p>키를 입력하세요</p>
<em class="message"></em>
<script>
const body = document.querySelector('body');
function getEventType(e) {
console.log(e);
document.querySelector('.message').innerHTML = `${e.type} : ${e.keyCode}`;
}
body.addEventListener('keydown', getEventType);
body.addEventListener('keyup', getEventType);
</script>
</body>
</html>- .cancelable : 요소의 기본 동작을 취소시킬 수 있는지 boolean으로 나타낸다.
- .preventDefault() : 요소의 기본 동작을 중단시킨다. (ex : a요소의 링크이동 동작을 중지시키는 것)
<!DOCTYPE html>
<html>
<body>
<a href="poiemaweb.com">Go to poiemaweb.com</a>
<script>
const elem = document.querySelector('a');
elem.addEventListener('click', function (e) {
console.log(e.cancelable);
// 기본 동작을 중단시킨다.
e.preventDefault();
});
</script>
</body>
</html>- .eventPhase : 이벤트 흐름상에서 어느 단계에 있는지를 반환한다. ( 0 → 이벤트 없음, 1 → 캡쳐링단계, 2 → 타깃, 3 → 버블링 단계)
- stopPropagation() : 이벤트를 처리한 후 이벤트가 부모 요소로 전파되는 것을 중단시키는 것이다.
(4) 이벤트 위임
- 다수의 자식 요소에 각각 이벤트 핸들러를 바인딩하는 대신 하나의 부모 요소에 이벤트 핸들러를 바인딩하는 방법이다.
- 예를 들어 li의 요소가 100개면 100개의 이벤트 핸들러를 바인딩해야 하며 동적으로 요소가 추가될 경우 바인딩이 되지 않는 단점이 있으므로 li의 부모 요소인 ul요소에 이벤트를 위임하는 것이다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] .querySelectorAll() 와 .querySelector() (0) | 2023.11.02 |
|---|---|
| [JavaScript] parentNode-parentElement 차이, children과 childNodes 차이 (0) | 2023.11.02 |
| [JavaScript] 동기식 처리 모델 vs 비동기식 처리 모델 (0) | 2023.10.31 |
| [JavaScript] DOM (0) | 2023.10.30 |
| [JavaScript] Higher order function (1) | 2023.10.30 |