JavaScript 문서 객체 모델 및 이벤트

폼 요소의 입력값 다루기

사용자에게 값을 입력받는 대표적인 폼 요소로는 input 태그와 select 태그가 있습니다.

 

한 줄 입력 - input 태그의 type 속성값을 text, password, number, url, search, email 등으로 지정했을 때 표시되는 폼

<form name="frm">

    <input type="text" name="id">

    <input type="password" name="pw">

  </form>

 

text와 password 요소에 사용자가 입력한 값을 가져오려면 해당 요소 노드에 value 속성을 사용합니다.

document.frm.id.value;

document.frm.pw.value;

 

다음 코드처럼 value 속성에 값을 할당하여 원하는 값을 자바스크립트로 입력 요소에 직접 삽입할 수 있습니다.

  <form name="frm">

    <input type="text" name="id">

    <input type="password" name="pw">

  </form>

  <script>

    document.frm.id.value = 'jscoding';

    document.frm.pw.value = 'aaaccc';

  </script>

 

여러 줄 입력 - textarea 사용하면 표시되는 폼 요소

<form name="frm">

    <textarea name="desc"></textarea>

  </form>

 

값을 설정할 때는 value 속성에 값을 할당한 자바스크립트 코드를 추가하면 됩니다.

  <form name="frm">

    <textarea name="desc"></textarea>

  </form>

  <script>

    document.frm.desc.value = 'setting!';

  </script>

체크 박스 - value 속성으로 값을 가져올 수 있음 / 체크 표시가 있는 것만 값을 가져오는 경우가 더 많음

 <form>

    <label><input type="checkbox" value="apple">사과</label>

    <label><input type="checkbox" value="banana">바나나</label>

    <label><input type="checkbox" value="orange">오렌지</label>

    <label><input type="checkbox" value="melon">멜론</label>

  </form>

 

체크 박스를 모두 체크된 상태로 바꾸고 싶으면 자바스크립트로 checked 속성에 true를 할당하면 됩니다.

<form>

    <label><input type="checkbox" value="apple">사과</label>

    <label><input type="checkbox" value="banana">바나나</label>

    <label><input type="checkbox" value="orange">오렌지</label>

    <label><input type="checkbox" value="melon">멜론</label>

  </form>

  <script>

    const checkboxEls = document.querySelectorAll("[type='checkbox']");

    for(let i = 0; i < checkboxEls.length; i++){

      checkboxEls[i].checked = true;

    }

  </script>

라디오 버튼 - checked 속성으로 라디오버튼이 선택됐는지 확인하고 value 속성으로 값을 가져옴

<form>

    <label><input type="radio" name="fruits" value="apple">사과</label>

    <label><input type="radio" name="fruits" value="banana">바나나</label>

    <label><input type="radio" name="fruits" value="orange">오렌지</label>

    <label><input type="radio" name="fruits" value="melon">멜론</label>

  </form>

<form>

    <label><input type="radio" name="fruits" value="apple">사과</label>

    <label><input type="radio" name="fruits" value="banana">바나나</label>

    <label><input type="radio" name="fruits" value="orange">오렌지</label>

    <label><input type="radio" name="fruits" value="melon">멜론</label>

  </form>

  <script>

    const radioEls = document.querySelectorAll("[type='radio']");

    for(let i = 0; i < radioEls.length; i++){

      if(radioEls[i].value === 'banana'){

        radioEls[i].checked = true;

      }

    }

  </script>

 

콤보박스 - select 태그로 만드는 콤보박스는 여러 항목에서 1개를 선택하는 폼 요소 / selected 속성으로 선택 항목을 확인할 수 있음

<form>

    <select>

      <option value="apple">사과</option>

      <option value="banana">바나나</option>

      <option value="orange">오렌지</option>

      <option value="melon">멜론</option>

    </select>

  </form>

<form>

    <select name="opt">

      <option value="apple">사과</option>

      <option value="banana">바나나</option>

      <option value="orange">오렌지</option>

      <option value="melon">멜론</option>

    </select>

  </form>

  <script>

    const optionEls = document.querySelectorAll("option")

    for(let i = 0; i < optionEls.length; i++){

      if(optionEls[i].value === 'banana'){

        optionEls[i].selected = true;

      }

    }

  </script>

 

파일 업로드 - input 태그의 type 속성값을 file로 지정하면 표시되는 요소

  <form name="frm1">

    <input type="text">

  </form>

  <form name="frm2">

    <input type="text">

  </form>

  <form name="frm3">

    <input type="text">

  </form>

 

폼 요소 관련 기타 메서드

메서드	설명
submit()	폼 요소의 값을 전송합니다.
focus()	폼 요소에 포커스(커서)를 이동합니다.

---

이벤트 다루기

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

 

이벤트 종류

구분	이벤트	설명
마우스 이벤트	onclick	마우스로 클릭하면 발생
	ondblclick	마우스로 빠르게 2번 클릭하면 발생
	onmouserover	마우스 포인터를 올리면 발생
	onmouseout	마우스 포인터가 빠져나가면 발생
	onmousemove	마우스 포인터가 움직이면 발생
	onwheel	마우스 휠을 움직이면 발생
키보드 이벤트	onkeypress	키보드 버튼을 누르고 있는 동안 발생
	onkeydown	키보드 버튼을 누른 순간 발생
	onkeyup	키보드 버튼을 눌렀다가 뗀 순간 발생
포커스 이벤트	onfocus	요소에 포커스가 되면 발생
	onblur	요소가 포커스를 잃으면 발생
폼 이벤트	onsubmit	폼이 전송될 때 발생
리소스 이벤트	onload	웹 브라우저의 리소스 로드가 끝나면 발생

 

이벤트 등록

이벤트가 발생할 때 어떤 작업을 할 지 자바스크립트 코드를 작성하는 것을 이벤트 등록이라고 합니다.

 

인라인 방식으로 이벤트 등록

html 태그에 속성으로 이벤트를 등록하는 방법

  <button onclick="clickEvent()">클릭</button>

  <script>

    function clickEvent(){

      alert("click");

    }

  </script>

입력창을 클릭해서 커서를 활성화하면 onfocus 이벤트가 발생합니다. 그리고 입력창 외부 영역을 클릭하면 onblur 이벤트가 발생해 커서가 빠져나가면서 블러(focus out) 상태가 됩니다.

<form>

    <input type="text" onfocus="focusEvent()" onblur="blurEvent()">

  </form>

  <script>

    function focusEvent(){

      console.log("focus on");

    }

    function blurEvent(){

      console.log("focus out");

    }

  </script>

 

※ 포커스 이벤트 사용시 주의할 점

코드 내부에 경고창을 나타내는 alert() 메서드를 사용하면 안 됩니다. 이렇게 작성하게 되면 경고창이 무한으로 뜨는 현상이 발생할 수 있습니다.

 

프로퍼티 리스너 방식으로 이벤트 등록

요소 노드에 직접 속성으로 이벤트를 등록하는 방법

<body>

  <button>클릭</button>

  <script>

    const btnEl = document.querySelector("button");

    btnEl.onclick = function(){

      alert("click");

    }

   

    btnEl.onclick = () => {

      alert("arrow click");

    }

 

 

    btnEl.onclick = clickEvent;

    function clickEvent(){

      alert("click");

    }

   

  </script>

</body>

 

이벤트 등록 메서드로 이벤트 등록

DOM에서 제공하는 addEventListener() 메서드를 이용하여 이벤트를 등록합니다.

<노드>.addEventListener("<이벤트 타입>", <이벤트 함수>);

<body>

  <button>클릭</button>

  <script>

    const btnEl = document.querySelector("button");

    btnEl.addEventListener("click", function(){

      alert("button Click");

    });

  </script>

</body>

 

이벤트 객체와 this

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

이벤트 함수에는 이벤트 객체라는 데이터가 내부적으로 전달되어 호출된다고만 이해하면 됩니다.

 

클릭 이벤트에 PointerEvent 객체가 전달되면 이벤트 객체가 출력됩니다.

 

{PointerEvent 객체의 주요 속성}

속성	설명
clientX	마우스가 클릭된 x좌표(수평 스크롤 포함 x)
clientY	마우스가 클릭된 y좌표(수직 스크롤 포함 x)
pageX	마우스가 클릭된 x좌표(수평 스크롤 포함 o)
pageY	마우스가 크릭된 y좌표(수직 스크롤 포함 o)
screenX	모니터의 왼쪽 위 모서리를 기준으로 마우스가 클릭된 x좌표
screenY	모니터의 왼쪽 위 모서리를 기준으로 마우스가 클릭된 y좌표

 

{KeyBoardEvent 객체의 주요 속성}

속성	설명
keyCode	키보드에서 눌린 키의 유니코드 값을 반환
ctrlKey	Ctrl 키가 눌렸으면 true, 아니면 false
altKey	Alt 키가 눌렸으면 true, 아니면 false
shiftKey	Shift 키가 눌렸으면 true, 아니면 false

 <form>

    <input type="text">

  </form>

  <script>

    const inputEl = document.querySelector("input");

    inputEl.addEventListener("keydown",function(event){ // 이벤트 객체      

      console.log(`keyCode:${event.keyCode}`);

      console.log(`ctrlKey:${event.ctrlKey}`);

      console.log(`altKey:${event.altKey}`);

      console.log(`shiftKey:${event.shiftKey}`);

    })

  </script>

 

이벤트 취소

preventDefault () 메서드를 사용하면 태그에 기본으로 연결된 이벤트를 취소할 수 있습니다.

예를 들어, a 태그는 생성된 요소를 클릭하면 다른 페이지로 이동 / form 태그는 폼 내부에서 버튼이 눌리면 전송되도록 전송 이벤트가 연결된 상태

<body>

  <a href="https://www.naver.com">네이버 이동</a>

  <a href="https://www.daum.net">다음 이동</a>

  <script>

    const aEls = document.querySelectorAll("a");

    for(let i = 0; i < aEls.length; i++){

      aEls[i].addEventListener("click", function(e){

        // 기본 이벤트 취소

        e.preventDefault();

      });

    }

  </script>

</body>

 

 

this 키워드 사용

이벤트 함수 내부에서 this 키워드를 사용하면 이벤트가 발생한 요소 노드를 바로 가리킬 수 있습니다.

 

p태그를 클릭하면 텍스트 색상을 빨간색으로 바꾸고 이미 빨간색이라면 다시 검은색으로 바꿉니다.

<body>

  <p>text-1</p>

  <p>text-2</p>

  <p>text-3</p>

  <script>

    const pEls = document.querySelectorAll("p")

    pEls.forEach((el)=>{

      el.addEventListener("click", function(){

        console.log(this);

       

        if(this.style.color === "red"){

          this.style.color = "black";

        }else{

          this.style.color = "red";

        }

     

      });

    })

  </script>

</body>