[JavaScript] DOM 이벤트란? 속성과 메서드 파악하기

DOM 이벤트(event)란?

 

DOM 이벤트란 사용자가 해당 페이지에서 하는 모든 행위를 뜻한다.
클릭이나 더블클릭, 마우스휠로 페이지를 위 아래로 이동하거나 태그위에 마우스를 올리는 등
모든 행위를 ' 이벤트 '라고한다.

자바스크립트에서 이벤트를 실행시키려면 이벤트 처리기(event handler)를 연결해야한다.
HTML 태그에 직접 이벤트 핸들러를 연결시킬수도 있지만 태그와 스크립트소스가 섞여있어
복잡한 프로그램에는 적합하지 않다.
이럴 때 자바스크립트 내부에서 이벤트 핸들러를 연결하면 html태그와 스크립트 소스를 완전히 분리시킬 수 있다.

---

1. 해당 요소에 이벤트를 직접 적용

해당 요소에 이벤트를 1개만 직접 적용할 때 사용한다. 다른 태그에는 해당 이벤트가 적용되지 않는다. 

// 기본형      
	요소명.on이벤트명 = function(){ 자바스크립트코드; }

 

2. 함수명을 이용해 이벤트 연결

이벤트를 함수로 등록한다. 이 이벤트는 여러 태그에 동시에 적용 가능하다.
이벤트로 함수를 호출할 때에는 함수명 뒤에 소괄호를 붙이지 않는다.

// 기본형
	변수명1 = 요소선택;
	변수명1.on이벤트명 = 함수명;
    
	function 함수명(){ 자바스크립트 코드; }

---

onclick이벤트를 활용하여 예시를 하나 만들어 보았다.
이미지를 클릭하면 이미지의 alt속성이 아래에 나타나는 것을 확인할 수 있다.

 

---

이벤트를 처리할 주체 선택

이벤트 핸들러(EventHandler)란 특정 요소에서 발생하는 이벤트를 처리하기 위해 사용하는 함수를 말한다.
이벤트 핸들러가 연결된 특정 요소에서 지정된 타입의 이벤트가 발생하면 브라우저에서 연결된 함수를 실행시킨다.

이벤트를 연결하는 가장 기본적인 방법은 이벤트가 발생하는 HTML 태그에 이벤트 핸들러를 직접 연결하는 것이다.
위와 같은 방식을 선택하면 html이 주인이 되어 자바스크립트의 함수를 호출해서 사용한다.
혹은 자바스크립트가 주인이 되어 HTML의 요소를 가져와서 이벤트를 처리하게 만들 수 있다.
우리는 이벤트 처리를 HTML이 하게 만들지 자바스크립트가 처리하게 만들지를 정하여 코드를 작성해야한다.

---

이벤트 처리 함수
onclick	마우스 클릭 시점
ondbclick	마우스 더블 클릭 시점
onmousedown	마우스 버튼 누르는 시점
onmouseup	마우스 버튼에서 떼는 시점
onmouseout	마우스 포인터가 요소를 벗어나는 시점
onmousemove	마우스 포인터가 요소 위에서 움직일 때
onmouseover	마우스 포인터가 요소 위에 올라왔을 시점
onwhell	마우스 휠을 움직일 경우
onkeydown	키보드를 누르고 있는 동안
onkeypress	키보드 클릭 시점
onkeyup	키보드 클릭 후 떼는 시점
onchange	input 요소 값이 바뀌는 시점 (변경된 이후, 포커스를 잃을 때) <input>, <select>, <textarea> 등에서 사용된다.
oninput	input 요소 값이 바뀌는 시점 (변경된 직후)
onblur	input 요소에서 focus를 잃는 시점
onfocus	input 요소에  focus 되는 시점(커서기준) <label>, <select>, <input>, <textarea>, <button> 과 같은 태그에서 사용된다.
onsubmit	submit 버튼 클릭 시점
onreset	form이 초기화 되었을 때
onload	해당 페이지를 처음 읽는 시점 (브라우저에서 문서로딩이 끝나면 이벤트 발생)
onunload	해당 페이지를 나가는 시점 (브라우저에서 문서를 종료할 때)
onabort	페이지나 이미지가 완전히 로딩되기 전에 멈췄을 경우
onerror	페이지나 이미지를 읽어오는 중 오류가 발생했을 경우
onresize	문서 화면 크기가 바뀌었을 경우
onscroll	문서 화면이 스크롤 되었을 때

---

HTML 태그에 이벤트 헨들러 직접 연결

이벤트를 연결하는 가장 기본적인 방법인 HTML태그에 이벤트 핸들러를 직접 연결하는 방법을 알아보겠다.
이 방법은 자바스크립트 초기 버전부터 많이 사용하던 방식이고 지금도 많이 사용한다.

이벤트 핸들러를 연결하는 기본형은 아래와 같다.
원하는 HTML 태그에 이벤트명을 입력후 속성값에 실행하고자 하는 이벤트 함수명을 넣으면 된다.

 // 기본형      
 < 태그명 이벤트명 = "함수명()" >

---

아래는 HTML 태그에 onclick 이벤트를 넣어 만들어보는 예시이다.
colorChange라는 함수를 넣어 각각의 버튼을 클릭하면 배경이 바뀌는 이벤트를 만들었다.

 

See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.

 

---

자바스크립트에서 이벤트 핸들러 연결

DOM을 이용하면 HTML요소를 자바스크립트에 가져올 수 있다.
DOM을 활용하여 자바스크립트에서 이벤트를 처리하는 방식은 다음과 같다.
자바스크립트에서 이벤트 핸들러를 연결하는 방법 세가지를 소개해보겠다.

---

1. 이벤트 함수를 만들어 요소의 속성값에 함수명으로 연결하기

먼저 요소를 불러오는 메서드를 활용하여 요소를 불러온다.
불러온 요소의 뒤에 이벤트 유형을 적고 값으로 이벤트 함수를 입력한다.
이벤트 함수는 function으로 작성되며 이벤트가 발생했을 경우 입력된 자바스크립트 코드가 출력된다.

// 기본형
	요소명.이벤트명 = 함수명;        
	function 함수명(){ 자바스크립트 코드; }

예시로 배경색상을 초록색으로 바꿔주는 버튼을 만들어 보겠다.

 

See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.

---

2. 요소를 변수에 저장하여 이벤트 함수 연결하기

두번째 방법은 요소를 변수에 담아서 사용한다는 것을 제외하고는 위의 방법과 동일하다.
아래와 같이 요소를 변수에 담아 사용할 경우 이벤트 함수를 여러번 다른 변수에 사용할 수 있다는 장점이 있다.
여러 태그에 동일한 이벤트를 적용하고 싶을 경우 이러한 방식을 많이 사용한다.

// 기본형
	const 변수명1 = 요소선택;
	const 변수명2 = 요소선택;
	const 변수명3 = 요소선택;

	function 함수명(){ 자바스크립트코드; }

	변수명1.이벤트명 = 함수명;
	변수명2.이벤트명 = 함수명;
	변수명3.이벤트명 = 함수명;

예시로 버튼을 누르면 배경색이 바뀌는 코딩을 작성해 보았다.

 

See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.

---

3. 요소에 이벤트 함수를 익명함수로 연결하기

익명함수로 이벤트 함수를 작성할 경우 연결한 해당 요소만 이벤트가 발생한다.
요소에 직접 원하는 이벤트를 적용하는 방법으로 해당 태그만 사용할 때 많이 사용하는 방식이다.

// 기본형     
	요소명.on이벤트명 = function(){ 자바스크립트 코드; }

요소에 이벤트와 함수를 한번에 선언하여 작성한 예시이다.

 

See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.

---

하나의 요소에 여러 이벤트를 연결하는 방법
 addEventListener() 

앞에서 배운 이벤트 핸들러는 한 요소에 하나의 이벤트만 연결할 수 있었다.
하나의 요소에 여러 이벤트를 연결하고 싶다면 addEventListener() 메서드를 이용해야한다.

// 기본형
요소선택.addEventListener(이벤트명, 함수, 캡쳐 여부)

1. 이벤트명

이벤트의 유형. click이나 keypress처럼 이벤트 이름이 들어간다.
단, on 키워드는 빼고 이벤트 이름만 쓴다.

2. 함수

이벤트가 발생하면 실행할 명령이나 함수를 지정한다.
함수를 정의할 때 event객체를 인수로 받는다.
이 이벤트 핸들러를 연결할 때 만약 함수명으로 연결할 경우 (소괄호)는 제외하고 함수의 이름만 넣어야한다.

3. 캡쳐 여부

이벤트를 캡쳐 여부를 지정하며 기본값은 false이다. true나 false중에 선택할 수 있다.
true면 캡처링, false면 버블링한다는 의미이다.
이벤트 캡처링은 DOM의 부모노드에서 자식노드로 이벤트를 전달하는 것을 의미하고,
버블링은 DOM의 자식 노드에서 부모 노드로 이벤트를 전달하는 것을 말한다.

---

예시1

 

See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.

 

예시2

 

See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.

 

예시3

 

See the Pen Untitled by 26%익산의 (@moroiolt-the-typescripter) on CodePen.

 

---

DOM의 이벤트 객체

DOM에는 이벤트 정보를 저장하는 event 객체가 있다.
이 객체에는 웹 문서에서 이벤트가 발생한 요소가 무엇인지, 어떤 이벤트가 발생했는지 등의 정보가 들어있다.
이벤트 객체는 이벤트 함수의 매개변수 자리에 event또는 e라는 변수명으로 받아올 수 있다.

 

이벤트 객체의 프로퍼티와 메서드 

프로퍼티
altKey	이벤트가 발생했을 때 Alt 키가 눌렸는지에 대한 여부를 boolean값으로 반환한다.
button	마우스에서 누른 버튼의 키 값을 반환한다.
charCode	keypress 이벤트가 발생했을 때 어떤 키를 눌렀는지 유니코드 값으로 반환한다
clinetX	이벤트가 발생한 가로 위치 좌표를 반환한다.
clinetY	이벤트가 발생한 세로 위치 좌표를 반환한다.
ctrlKey	이벤트가 발생했을 때 ctrl키가 눌렸는지에 대한 여부를 boolean값으로 반환한다.
pageX	현재 문서를 기준으로 이벤트가 발생한 가로 위치 좌표를 반환한다.
pageY	현재 문서를 기준으로 이벤트가 발생한 세로 위치 좌표를 반환한다.
screenX	현재 화면를 기준으로 이벤트가 발생한 가로 위치 좌표를 반환한다.
screenY	현재 화면를 기준으로 이벤트가 발생한 세로 위치 좌표를 반환한다.
shiftKey	이벤트가 발생했을 때 shift키가 눌렸는지에 대한 여부를 boolean값으로 반환한다.
target	이벤트가 최초로 발생한 대상을 반환한다.(태그를 반환한다.)★★
timeStamp	이벤트가 발생한 시간을 반환한다.
type	발생한 이벤트의 이름을 반환한다.
which	키보드에 관련된 이벤트가 발생할 때 키의 유니코드 값을 반환한다.

메서드
preventDefault()	이벤트를 취소할 수 있는 경우 취소한다. a 태그나 button처럼 기본 기능이 있을 때 기본 기능을 취소할 때 사용한다.