[Vanilla JS] HTML input의 onchange, onsubmit

onchange

<div id="name" class="fadein">
   <h1>Welcome to Sehwa World, what's your name?</h1>
   <input id="guest_name" type="text" onChange="PrintName()">
   <p style="color: #9BA4B5" class="blink">Press enter</p>
</div>

• 우선, onchange="PrintName()" 에서 함수 뒤에 괄호를 붙여야만 작동된다. 리액트랑 헷갈려서 괄호를 뺐더니 작동하지 않았다.

• onchange 는 input의 값이 완전히 제출되면 실행되는 이벤트이다.
  대비를 위해 덧붙이자면 oninpt이라는 이벤트는 input값이 바뀔 때마다 계속 실행되는 이벤트.

onsubmit

<form id="name" class="fadein" onsubmit="PrintName()">
   <h1>Welcome to Sehwa World, what's your name?</h1>
   <input id="guest_name" type="text" >
   <p style="color: #9BA4B5" class="blink">Press enter</p>
</form>

• onsubmit은 input이 아니라 form태그에 쓰는 것이다.

• guest_name이 제출되면 form에 onsubmit을 넣어서 preventDefault() 로 새로고침을 방지하고, 나머지 코드들을 실행하려고 했으나 계속 새로고침 됨.
  혹시나 해서 그냥 form을 그래빙한 것에 addEventListener("submit", func)를 했더니 그제서야 preventDefault()가 동작함.

• 이유는 모르겠지만 preventDefault()는 addEventListener와 짝꿍으로 써줘야 실행이 되는 듯하다.