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