[JavaScript] 자바스크립트(Event Listenr & Event 객체, Event 종류 모음)

DOM Event

“어떠한 버튼을 클릭했을 때 어떠한 액션이 일어나게 하려면 어떻게 해야 할까요?”

Event Listener

마우스를 이용해서 버튼을 클릭할 때는 클릭 “이벤트"가 발생한다.

⇒ 이렇게 이벤트가 발생했을 때 어떠한 액션을 위한 함수(= 이벤트 리스너)를 호출한다.

addEventListener()

어떠한 이벤트가 발생했을 때 이벤트 리스너를 호출하기 위해서는 이벤트 리스너를 해당 객체나 요소에 등록해주어야한다.

 

1. Property Listener
자바스크립트 코드에서 프로퍼티(객체의 속성)로 등록
(=onload 같은 속성에 함수(핸들러)를 할당하는 방식)
⇒ 이벤트 핸들러를 DOM 객체의 프로퍼티에 할당하는 방식
= 즉, 이벤트를 특정 객체에 속성으로 등록하는 것

window.onload = function () {
		// 문서가 load 될 때 이 함수 실행
		
		let text = document.getElementById("text");
		// 아이디가 text 인 요소를 return
		
		text.innerHTML = "HTML 문서 loaded";
}

=> 엘리먼트의 onload 속성에 이벤트 핸들러를 지정하는 코드.

 

window.onload는 DOM 객체인 window의 속성이다. window라는 객체에 onload라는 속성을 추가하고, 그 값으로 이벤트 핸들러(함수)를 지정하는 것이다.

 

2. Inline 인라인 이벤트

<button onclick="alert('버튼이 클릭됐습니다.')" >버튼입니다.</button>

 

HTML 태그에 속성으로 등록

 

3. addEventListner 메소드 사용
element.addEventListener(이벤트명, 실행할 함수 명(listener), 옵션);
⇒ 가장 권장되는 방식. 여러개의 이벤트 리스너 등록 가능.

const aElement = document.querySelector('a');

aElement.addEventListner('click', () => {
		alert('a element clicked');
});

 

Event 객체

이벤트가 발생할 때 이벤트 객체를 가져올 수 있다.

const buttonElement = document.querySelector('.btn2');

buttonElement.addEventListner('click', (event) => {
    let val;
    val = event.target; // 콘솔에 넣을경우 이 요소가 출력됨.
    val = event.target.id; 
    val = event.target.classList;
    
    val = event.type; //click

    // 윈도우로부터의 거리 좌표
    val = event.clientY;
    // 요소로부터의 거리 좌표
    val = event.offsetY;
    
    console.log(event);
})

---

Event 종류

1. UI 이벤트

• load: 페이지나 리소스가 완전히 로드되었을 때 발생. (문서나 객체가 로드 완료 되었을때)
• resize: 브라우저 창 크기가 변경되었을 때 발생. (객체의 크기가 바뀌었을 때 발생)
• scroll: 페이지가 스크롤될 때 발생. (스크롤바를 조작할 때 발생)
• unload: 사용자가 페이지를 떠날 때 발생.
• error: 리소스 로드 중 에러가 발생했을 때 발생.
• change: 객체의 내용이 변동되거나 포커스를 잃었을 때 발생

2. 마우스 이벤트

• click: 객체를 클릭했을 때 발생.
• dblclick: 객체(요소)를 더블 클릭했을 때 발생.
• mousedown: 마우스 버튼을 눌렀을 때 발생.
• mouseup: 마우스 버튼을 뗐을 때 발생.
• mousemove: 마우스가 움직였을 때 발생.
• mouseenter: 마우스가 특정 객체 위로 올라갈 때 발생(하위 요소 이벤트는 발생하지 않음).
• mouseleave: 마우스가 특정 객체를 벗어날 때 발생(하위 요소 이벤트는 발생하지 않음).
• mouseover: 마우스가 특정 객체 위로 올려졌을 때 발생(하위 요소도 이벤트가 발생).
• mouseout: 마우스가 특정 객체를 벗어날 때 발생(하위 요소도 이벤트가 발생).

3. 키보드 이벤트

• keydown: 키를 눌렀을 때 발생.
• keyup: 키를 눌렀다가 뗐을 때 발생.
• keypress: 사용자가 눌렀던 키의 문자가 입력되었을 때 발생
• (현재는 keydown과 keyup 사용을 권장한다고 한다)

4. 포커스 이벤트

• focus: 객체에 포커스가 되었 때 발생.
• blur: 객체가 포커스를 잃었을 때 발생.

5. 폼 이벤트

• input: input, textarea 요소 값이 변경되었을 때 발생 (입력값이 변경될 때 실시간으로 발생.)
• change: 선택상자, 체크박스, 라디오 버튼의 상태가 변경되었을 때 발생
• select: 텍스트 선택을 했을 때 발생
• submit: 사용자가 버튼키 등을 활용하여 폼을 전송할 때 발생 (폼이 제출되었을 때 발생.)
• reset: 리셋 버튼을 눌렀을 때 발생 (폼이 리셋되었을 때 발생.)
• cut/copy/paste: 사용자가 폼 필드의 콘텐츠를 잘라내기/복사/붙여넣기 했을 때 발생