자바스크립트 이벤트 중 Focus와 Form과 관련된 이벤트들이다. 이벤트를 보고 아래 코드를 보며 어떤 작용을 할지 생각해보면 좋을 것 같다. Focus & Form Event focus : 요소가 포커스를 얻었을 때 blur: 요소가 포커스를 잃었을 때 input : 값이 변경되었을 때 change : 상태가 변경되었을 때 submit : 제출 버튼을 선택했을 때 reset : 리셋 버튼을 선택했을 때
event
자바스크립트 이벤트 중 Keyboard와 관련된 이벤트들이다. 이벤트를 보고 아래 코드를 보며 어떤 작용을 할지 생각해보면 좋을 것 같다. Keyboard Event keydown : 키를 누를 때 keyup : 키를 뗄 때
자바스크립트 이벤트 중 Mouse와 관련된 이벤트들이다. 이벤트를 보고 아래 코드를 보며 어떤 작용을 할지 생각해보면 좋을 것 같다. Mouse Event click: 요소를 클릭(버튼을 눌렀다가 뗌)했을 때 발생 dbclick: 요소를 더블클릭했을 때 발생 mousedown: 요소에 마우스 버튼을 눌렀을 때 발생 mouseup: 요소에 마우스 버튼을 뗐을 때 발생 mouseenter: 요소 안에 커서가 들어갔을 때 발생 mouseleave: 요소 안에서 커서가 벗어났을 때 발생 mousemove: 해당 요소에서 커서를 움직였을 때 발생 contextmenu: 마우스 오른쪽 버튼을 눌렀을 때 발생 wheel: 마우스 휠을 굴렸을 때 발생
이벤트 위임 (event delegation) 비슷한 방식으로 여러 요소들을 다뤄야할 때 사용한다. 모든 요소에 이벤트를 달아주는 것이 아니라 공통 조상에 이벤트 핸들러 하나만 할당한다. 그 후 부모요소를 통해 자식 요소에 할당해주면 되는데, 이 방법을 통하면 이벤트를 하나만 할당해도 여러 요소를 한 번에 다룰 수 있다. 1 2 3 4 커스텀 이벤트 (custom event) 이벤트를 직접 만들어 dispatchEvent를 통해 실행시키는 것을 뜻한다. 이게 사실 사용을 하나 싶어서 찾아봤는데 그래픽 컴포넌트를 만들 때 사용된다고 한다. 어쨌든 쓰니까 만들어 놨겠지라는 생각을 하지만... mdn 문서를 참조하면 좋을 듯 하여 아래에 첨부한다. 1 2 3 4 https://developer.mozilla...
이벤트가 발생했을 때, 이것이 퍼져나가는 방식에는 2가지가 있다. 하나는 버블링 방식이고 하나는 캡쳐링 방식이다. 버블링 한 요소에 이벤트가 발생하면 해당하는 요소에 할당된 핸들러가 동작한 후, 부모 요소의 핸들러가 동작한다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다. 아래에서 위로 올라가는 게 거품이 퍼져나가는 것 같다고 해서 버블링이라고 한다는 썰이 있다. 버블링은 event.stopPropagation() 을 이용해서 중지할 수 있다. 캡쳐링 버블링의 반대 방식이라고 생각하면 편하다. 자주 쓰이지는 않는다고 한다. 캡쳐링은 이벤트가 발생하면 해당하는 요소에 할당된 핸들러가 동작한 후, 자식 요소의 핸들러가 동작한다. 최하단의 요소를 만날 때까..
클릭, 마우스 휠, 마우스를 올렸다 내려 놓기, 키 입력 등의 행동들이 이벤트다. 이런 이벤트가 일어났을 때 핸들러 함수를 추가할 수 있는 메서드가 addEventListener. 이번에는 이에 대한 기록을 하려고 한다. NoDieMeCarry removeEventListener에 대한 의문이 있었는데 이번에 풀 수 있어서 좋았다. 함수 안에서 작동하는 인수기 때문에 removeEventListener에 연결할 수 없던 것!
form 이벤트를 공부하는 중에 새로운 친구를 발견했다. 예전에 들었던 거 같은데 까먹은 건지... 새로운 건지 알 수가 없는 노릇이다. 갈 길이 왜 이렇게 먼 거 같지. 그래도 하다보면 전보다는 나아질 거라는 생각으로 공부해야겠다. event.preventDefault() 폼을 제출하는 경우 기본적으로 페이지가 새로 고침 된다. 하지만 페이지가 새로 고침 될 경우 input 필드에 있는 값도 초기화 되어 버리기 떄문에, 이런 기본 동작(새로 고침)을 막기 위해서 event 객체에서 제공하는 preventDefault() 메서드를 사용한다. 여담으로 form을 넣는 이유가 이후에 백앤드와 정보 전달을 하기 위해서라 addEventListener에 click보다 submit으로 하는 게 좋다고 한다.
