스터디13일차 - addEventListener 마우스&키보드, change, input

258. addEventListener 이벤트 주기
const btn = document.querySelector('button'); // 태그를 선택합니다.
btn.addEventListener('click', function () { // click 이벤트를 줍니다.
    console.log("Clicked!") // 이벤트가 발생하면 실행할 코드입니다.
})

쓸만한 이벤트 종류입니다.
click : 클릭 
mouseenter : 마우스가 들어갈 때
mouseleave : 마우스가 떠날 때
mousedown : 클릭버튼을 누른 순간
mouseup : 클릭을 하고 뗀 순간

함수를 직접 만들지 않고, 아래와 같이 만들어 둔 함수를 넣을 수도 있습니다.
function printClicked() { // 함수를 만들고
    console.log("Clicked!")
}
btn.addEventListener('click', printClicked) // 함수 이름을 넣습니다.



260. 이벤트와 this



261. 키보드 이벤트와 이벤트 객체 keydown, keyup
const input = document.querySelector('input'); // 태그를 선택합니다.
input.addEventListener('keydown', function () { // keydown 이벤트를 줍니다.
    console.log("KEYDOWN") // 키가 눌리는 순간에 KEYDOWN을 출력합니다.
})
const input = document.querySelector('input'); // 태그를 선택합니다.
input.addEventListener('keyup', function () { // keydown 이벤트를 줍니다.
    console.log("KEYUP") // 키가 눌리는 순간에 KEYUP을 출력합니다.
})

이제 무슨 키가 눌렸는지 알아냅시다.

input.addEventListener('keydown', function (e) { // event를 가져옵니다.줍니다.
    console.log(e.key) // e.key를 출력합니다. w,a,s,d와 같이 실제로 출력되는 키입니다.
    console.log(e.code) // e.code를 출력합니다. KeyW,KeyA,KeyS,KeyD와 같이 실제 키보드에서의 자판 위치입니다.
    // 사람마다 키보드 커스텀이 달라 키보드와 키의 위치가 다를 수 있기 때문에 구분합니다.
})



262. form 이벤트와 preventDefault()
input의 입력 값에 접근하는 속성은 value 입니다.
document.querySelectorAll('input')[1].value = "인덱스 1 인 input에 입력할 값입니다." 
input 안에 입력할 text가 "인덱스 1 인 input에 입력할 값입니다." 로 바뀝니다.

제출을 하고 나서 input의 value를 초기화하고 싶다면 value를 공백으로 만들어주면 됩니다..
input.value = '';
tweet.value = '';

PRACTICE : 1.form의 input에 입력한 내용을 >>>>> 2.li로 만들어 >>>>> 3.ul의 자식으로 추가하기
const form = document.querySelector("form"); // form을 선택합니다.
const ul = document.querySelector("#list"); // ul을 선택합니다.

form.addEventListener("submit", function (e) {
    e.preventDefault(); // submit 이벤트(새로고침)를 막습니다.
    const qty = form.elements.product; // form에서 name="product"인 태그(여기서는 input)를 선택합니다.
    const product = form.elements.qty; // form에서 name="qty"인 태그(여기서는 input)를 선택합니다.

    const newLi = document.createElement("li"); // 빈 li 태그를 만듭니다.
    ul.append(newLi); // ul의 자식으로 빈 li 태그를 추가합니다.
    newLi.append(`${product.value} ${qty.value}`); // li에 text(input에 입력된 값)를 추가합니다.

    qty.value = ""; // input에 입력된 값을 없애는 초기화 작업을 합니다.
    product.value = ""; // input에 입력된 값을 없애는 초기화 작업을 합니다.
});



263. 입력과 변경 이벤트 : .addEventListener('change',function) .addEventListener('input',function)
'change' 이벤트
const input = document.querySelector('input'); // input을 선택합니다.

input.addEventListener('change',function(e) { // input에 'change' 이벤트를 줍니다.
    console.log("Changed!") // 코드를 실행합니다.
})
change 이벤트는 input에 뭔가를 입력하고 "포커스를 떠날 때(다른 곳을 클릭 했을 때)"실행됩니다. : value가 변할 때

'input' 이벤트 
const input = document.querySelector('input'); // input을 선택합니다.
const h1 = document.querySelector('h1'); // h1을 선택합니다.

input.addEventListener('input',function(e) { // input에 'input' 이벤트를 줍니다.
    h1.innerText = input.value; // input에 입력한 값이 변경될 때마다 h1의 텍스트를 바꾸는 코드를 실행합니다.
})
input이벤트는 input에 "글자를 입력하는 매 순간" 실행됩니다. 
h1 안의 텍스트가 input에 한글자 한글자 입력한 값으로 즉시 바뀝니다.

PRACTICE : h1 글자를 input 메세지로 바꾸기
const h1 = document.querySelector("h1"); // h1을 선택합니다.
const input = document.querySelector("input"); // input을 선택합니다.

input.addEventListener("input", function (e) { // input에 'input' 이벤트를 만듭니다.
    h1.innerText = `Welcome, ${input.value}`; // h1안의 텍스트를 "Welcome, input안의 입력값" 으로 바꿉니다.
    if (input.value == "") { // input안의 입력값이 비어있다면
        h1.innerText = "Enter Your Username"; // h1안의 텍스트를 "Enter Your Username"로 바꿉니다. 
    }
});