클릭, 마우스 휠, 마우스를 올렸다 내려 놓기, 키 입력 등의 행동들이 이벤트다. 이런 이벤트가 일어났을 때 핸들러 함수를 추가할 수 있는 메서드가 addEventListener. 이번에는 이에 대한 기록을 하려고 한다. NoDieMeCarry removeEventListener에 대한 의문이 있었는데 이번에 풀 수 있어서 좋았다. 함수 안에서 작동하는 인수기 때문에 removeEventListener에 연결할 수 없던 것!
preventDefault
form 이벤트를 공부하는 중에 새로운 친구를 발견했다. 예전에 들었던 거 같은데 까먹은 건지... 새로운 건지 알 수가 없는 노릇이다. 갈 길이 왜 이렇게 먼 거 같지. 그래도 하다보면 전보다는 나아질 거라는 생각으로 공부해야겠다. event.preventDefault() 폼을 제출하는 경우 기본적으로 페이지가 새로 고침 된다. 하지만 페이지가 새로 고침 될 경우 input 필드에 있는 값도 초기화 되어 버리기 떄문에, 이런 기본 동작(새로 고침)을 막기 위해서 event 객체에서 제공하는 preventDefault() 메서드를 사용한다. 여담으로 form을 넣는 이유가 이후에 백앤드와 정보 전달을 하기 위해서라 addEventListener에 click보다 submit으로 하는 게 좋다고 한다.
