[JS] 12장: 문서 객체 모델과 이벤트 다루기 (2)

개요

이번 장에서는 자바스크립트를 통해 폼을 조작하고, 다양한 이벤트를 다루며, 이벤트 객체와 this의 동작 원리에 대해 배우게 된다. 이를 통해 사용자 입력을 더 효과적으로 처리하고, 페이지 내에서 역동적인 상호작용을 구현할 수 있다. 이벤트 객체의 활용법을 익히면 사용자가 클릭하거나 키를 누르는 순간의 정보를 활용해 더 직관적인 사용자 경험을 제공할 수 있게 될 것이다. 이번 학습을 통해 실무에 가까운 자바스크립트 활용법을 다질 수 있을 것 같다.

폼 조작하기

form 태그 선택하기

#forms 속성 사용하기

document 객체의 forms 속성은 form 태그의 노드 정보를 HTMLCollection 객체에 담아 반환한다. 따라서 이 forms 속성을 사용하면 화면에 있는 form 요소 노드를 쉽게 선택할 수 있다.

이때 document.forms[] 배열을 통해 form에 접근할 수 있지만, form 태그의 위치가 바뀌면 잘못 참조하게 되어 예기치 못한 오류가 발생할 수 있다는 단점이 있다.

#name속성 사용하기

form 태그에 name 속성을 사용하면 훨씬 직관적으로 form 요소 노드를 선택할 수 있다.

위의 이미지와 같이, 각 form에 이름을 붙이면 document.(form 이름)으로 해당 노드를 간단하게 불러올 수 있다. 또한, 순서가 바뀌어도 문제없이 불러올 수 있다.

폼 요소 선택하기

폼 요소에는 input, select, button 등 다양한 태그가 있다.

form을 찾을 때와 마찬가지로, 요소를 찾을 때도 배열의 형태로 불러올 수 있다. 위와 같이, elements 속성을 콘솔창에서 출력하면 index와 그에 해당하는 폼이 나타난다. 또한, [] 안에 name속성값을 넣거나 . 뒤에 name을 넣어도 불러올 수 있다.

//모두 같은 요소 노드를 반환한다.
document.frm1[0];
document.frm1.elements['uname'];
document.frm1.uname;

폼 요소의 입력값 다루기

폼 요소는 사용자에게 값을 입력받아 이를 서버에 전달한다. 전달받은 값을 서버에서 활용하는 것은 backend의 영역이지만, 서버에 전달하기 전까지 값의 유효성은 검증할 수 있어야 한다.

• 사용자의 입력값은 .value 속성을 통해 가져올 수 있다.
• 체크박스와 라디오버튼은 다른 요소와 다르게, checked 속성이 있는 것만 value 속성으로 값을 가져와야 한다. value 속성에는 항목의 내용이 무엇인지 들어있기 때문이다.
• 콤보 박스에서는 selected 속성으로 선택 항목을 확인할 수 있다.
• checked 속성과 selected 속성은 모두 boolean으로 값을 설정할 수 있다.
• 파일 업로드 요소에서는 files 속성으로 반환되는 FileList 객체가 있다. 이 객체로부터 파일 이름, 크기, 타입, 마지막 수정일 등 여러 메타 정보를 불러올 수 있다.

이벤트 다루기

이벤트 : 웹 브라우저와 사용자 사이에 상호작용이 발생하는 특정 시점.

이벤트 종류

주요 이벤트 종류 :

• onclick : 클릭
• ondbclick : 더블 클릭
• onmouseover : 마우스 포인터 올리기
• onmouseout : 올린 마우스 포인터 빼기
• onmousemove : 포인터의 움직임
• onwheel : 마우스 휠 움직이기
• onkeypress : 키보드 버튼 누르고 있기
• onkeydown : 키보드 누른 순간.
• onkeyup : 키보드 뗀 순간.
• onfocus : 요소가 포커스됨.
• onblur : 요소가 포커스를 잃음
• onsubmit : 폼 전송
• onload : 웹 브라우저의 리소스 로드 종료.

이벤트 등록하기

이벤트 등록 방법 : 인라인, 프로퍼티 리스너, 이벤트 등록 메서드.

<script>
    function clickEvent() {
         alert("click");
    }
</script>
    
//인라인 이벤트 등록 : 태그에서 함수 사용
<button onclick="clickEvent()">클릭</button>

<button id="click">클릭</button>
    <script>
    	
        const btnEl = document.querySelector("#click");
        //프로퍼티 리스너 방식으로 이벤트 등록
        btnEl.onclick = function clickEvent() {
            alert("hello world");
        }
        //이벤트 등록 메서드로 이벤트 등록
        btnEl.addEventListener("click", function() {
        	alert("button click");
        });
    </script>

 

이벤트 객체와 this

이벤트 객체 : 이벤트 타입에 따라 발생하는 이벤트의 각종 정보가 들어있는 객체 집합.

이벤트 객체 사용하기

클릭 이벤트 : PointerEvent 객체. 
속성 : clientX, clientY, pageX, pageY, screenX, screenY 등.

키보드 이벤트 : KeyboardEvent 객체.
속성 : keyCode(유니코드 반환), ctrlKey, altKey, shiftKey.

이벤트 취소하기

a 태그 : 클릭 시 다른 페이지로 이동하도록 하는 클릭 이벤트 연결되어 있음.
form 태그 : 버튼이 눌릴 때 전송되도록 하는 전송 이벤트 연결되어 있음.
=> preventDefault() 메서드를 사용하면 이벤트 취소할 수 있다.

this 키워드 사용하기

이벤트 함수 내부에서 사용하면 이벤트가 발생한 요소 노드를 가리킨다. 단, 화살표 메서드라면 this의 범위가 달라져 이벤트 발생 노드를 가리키는 대신 window 객체를 가리킨다.