이벤트리스너 맛보기

Warming up the eventListener

var body = document.body;

var word = document.createElement('div');//태그를 새로 만들었으면 반드시 append로 추가해줘야한다!
word.textContent = '제로초'
document.body.append(word);

var fform = document.createElement('form');
document.body.append(fform);

var 입력창 = document.createElement('input');
fform.append(입력창);//document>body가 아니라 form 하위에 만들어줘야하기 때문에.

var btn = document.createElement('button');
btn.textContent = '입력';//태그 안에 들어가는 글자.
fform.append(btn);

var result = document.createElement('div');
document.body.append();

//form 안에서 input은 엔터키를 사용할 수 있다. 이 때 새로고침되는 현상만 해결해주면 된다.
form.addEventListener('submit',function(e){//function이 콜백함수로 쓰였다.
    e.preventDefault();//엔터를 치면 다음 페이지로 넘어가는 form의 기본 동작을 막는다.
    if(word.textContent[word.length - 1] === 입력창.value[0]) {//입력창.value 가 입력하려는 값.
        //태그 안에 들어가는 것들은 textContent이고 입력창에 들어가는 것들은 value이다!
        result.textContent = '딩동댕';
        word.textContent = 입력창.value;
        입력창.value = ' ';
        입력창.focus();//입력을 누른 후에 클릭하지 않아도 입력창에 커서가 가있다.
    } else {
        result.textContent = '땡';
        입력창.focus();
    }
});
//console.dir(document.body)하면 태그들이 나온다. DOM을 쓰려면 dir을 쓰면 된다.
//input과 button 태그를 form 태그로 감싸면 된다.

사용자의 편의를 위해 엔터키를 사용하여 입력하고 싶을 땐, input과 button 태그를 form 태그로 감싸주면 된다. 이것을 js로 작성한다면, 일단 form 태그를 추가하고, 11번줄과 15번줄 에서처럼 form 태그 하위에 input과 button 태그가 들어가도록 수정해주면 된다. 그리고 form태그를 submit했을 때 동작하도록 21번줄도 위와 같이 수정한다. preventDefault는 매개변수로 들어온 값의 기본 동작을 막는 기능을 한다. 여기서는 엔터를 치면 다음 페이지로 넘어가는 form의 기본 동작을 막음으로써 아래의 코드들이 실행되도록한다.