JS 기초-(7) 입력

입력 형태

Prompt

prompt("안내글")

사용자에게 입력창을 주고
숫자나 true를 입력하더라도 string (문자형)으로 입력한다.

confirm

confirm("안내글")

사용자가 확인 또는 취소를 선택하게 하고
확인을 누르면 true를 반환, 취소를 누르면 false를 반환한다.

input

<input type="text" id="userName" value="수요일">
  <button onclick="inputPrint()">클릭</button>
  
  <script>
    const input = document.querySelector("#userName");
    function inputPrint(){
      console.log(input.value);
    }
  </script>

👉 input userName에 작성한 value를 콘솔에 작성했다.

addEventListener("input",)

<script>
	input.addEventListener("input",function(){
    })
</script>

this

  <ul>
    <li onclick="liclick(this)">list1</li>
    <li onclick="liclick(this)">list2</li>
    <li onclick="liclick(this)">list3</li>
    <li onclick="liclick(this)">list4</li>
  </ul>
  
  <script>
    function liclick(li){ 
      console.log(li); 
    }
  </script>

👉 입력위치를 this로 지정할 수 있다.

target

  <ul>
    <li>list1 <span>span</span></li>
    <li>list2 <span>span</span></li>
    <li>list3 <span>span</span></li>
    <li>list4 <span>span</span></li>
  </ul>
  
  <script>
    const ul= document.querySelector("ul");
    ul.addEventListener("click", function(e){
      console.log(e.target);
    })
  </script>

👉 target으로 지정하면 자식요소를 클릭할 때에도 똑같은 Event를 적용시킨다.