Language/JS
DOM(2) - 이벤트
delee2008
2024. 2. 25. 21:51
자주 사용하는 이벤트의 종류
- click – 마우스버튼을 클릭하고 버튼에서 손가락을 떼면 발생한다.
- mouseover – 마우스를 HTML요소 위에 올리면 발생한다.
- mouseout – 마우스가 HTML요소 밖으로 벗어날 때 발생한다.
- mousedown – 클릭을 하기 위해 마우스버튼을 누르고 아직 떼기 전인 그 순간, HTML요소를 드래그할 때 사용할 수 있다.
- mouseup – 마우스버튼을 떼는 그 순간, 드래그한 HTML요소를 어딘가에 놓을 때 사용할 수 있다.
- mousemove – 마우스가 움직일때마다 발생한다. 마우스커서의 현재 위치를 계속 기록하는 것에 사용할 수 있다.
- focus – HTML요소에 포커스가 갔을때 발생한다.
- blur – HTML요소가 포커스에서 벗어났을때 발생한다.
- keypress – 키를 누르는 순간에 발생하고 키를 누르고 있는 동안 계속해서 발생한다.
- keydown – 키를 누를 때 발생한다.
- keyup – 키를 눌렀다가 떼는 순간에 발생한다.
- load – 웹페이지에서 사용할 모든 파일의 다운로드가 완료되었을때 발생한다.
- resize – 브라우저 창의 크기를 조절할때 발생한다.
- scroll – 스크롤바를 드래그하거나 키보드(up, down)를 사용하거나 마우스 휠을 사용해서 웹페이지를 스크롤할 때 발생한다. 페이지에 스크롤바가 없다면 이벤트는 발생하지 않다.
- unload – 링크를 클릭해서 다른 페이지로 이동하거나 브라우저 탭을 닫을 때 혹은 브라우저 창을 닫을 때 이벤트가 발생한다.
- change – 폼 필드의 상태가 변경되었을 때 발생한다. 라디오 버튼을 클릭하거나 셀렉트 박스에서 값을 선택하는 경우를 예로 들수 있다.
이벤트 처리하기
-addEventListener(1, 2, 3) : 이벤트가 발생한 요소에 이벤트 처리기를 연결해 주는 함수
- 처리할 이벤트 지정(on 붙이지않음)
- 이벤트가 발생했을 때 실행할 명령을 나열하거나 따로 함수를 만들었다면 함수 이름을 지정
- 이벤트를 캡처링하는지 여부를 지정, 생략 가능/ true면 캡처링, false면 버블링
콜백 함수
- 이벤트 처리기는 콜백 함수로 구현
- 콜백 함수는 함수 안에서 함수를 선언하고 그 함수를 반환하는 함수
이벤트 버블링
- 하위 요소에서 이벤트가 발생하면 상위 요소로 이벤트가 전달되는 현상
- 이벤트 버블링을 이용하면 하위 요소에서 처리된 이벤트를 상위 요소에서도 처리 가능
이벤트 캡쳐링
- 상위 요소에서 이벤트가 발생하면 하위 요소로 이벤트가 전달되는 현상
- 이벤트 캡쳐링을 이용하면 상위 요소에서 처리된 이벤트를 하위 요소에서도 처리 가능
이벤트 제거하기
- removeEventListener(1, 2, 3) : 이벤트 처리기를 제거해주는 함수
이벤트 객체
- 이벤트가 발생할 때, 이벤트 정보를 담은 객체가 생성됨
- 이벤트 객체를 이용하면 이벤트가 발생한 대상을 찾고, 이벤트가 발생한 위치 등의 정보를 얻을 수 있음
- 이벤트 객체의.preventDefault() 메소드를 호출하면 기본 동작을 취소할 수 있음
이벤트 객체
- 공통 속성
속성 설명
| type | 이벤트 이름 |
| target | 이벤트가 발생한 요소 |
| currentTarget | 이벤트 핸들러가 등록된 요소 |
| timeStamp | 이벤트 발생 시각 |
| bubbles | 버블링 단계인지를 판단하는 값 |
addEventListener에서 함수에 parameter를 전달하고 싶다면, 익명을 함수를 사용해야함
자주 사용하는 이벤트의 종류
- click – 마우스버튼을 클릭하고 버튼에서 손가락을 떼면 발생한다.
- mouseover – 마우스를 HTML요소 위에 올리면 발생한다.
- mouseout – 마우스가 HTML요소 밖으로 벗어날 때 발생한다.
- mousedown – 클릭을 하기 위해 마우스버튼을 누르고 아직 떼기 전인 그 순간, HTML요소를 드래그할 때 사용할 수 있다.
- mouseup – 마우스버튼을 떼는 그 순간, 드래그한 HTML요소를 어딘가에 놓을 때 사용할 수 있다.
- mousemove – 마우스가 움직일때마다 발생한다. 마우스커서의 현재 위치를 계속 기록하는 것에 사용할 수 있다.
- focus – HTML요소에 포커스가 갔을때 발생한다.
- blur – HTML요소가 포커스에서 벗어났을때 발생한다.
- keypress – 키를 누르는 순간에 발생하고 키를 누르고 있는 동안 계속해서 발생한다.
- keydown – 키를 누를 때 발생한다.
- keyup – 키를 눌렀다가 떼는 순간에 발생한다.
- load – 웹페이지에서 사용할 모든 파일의 다운로드가 완료되었을때 발생한다.
- resize – 브라우저 창의 크기를 조절할때 발생한다.
- scroll – 스크롤바를 드래그하거나 키보드(up, down)를 사용하거나 마우스 휠을 사용해서 웹페이지를 스크롤할 때 발생한다. 페이지에 스크롤바가 없다면 이벤트는 발생하지 않다.
- unload – 링크를 클릭해서 다른 페이지로 이동하거나 브라우저 탭을 닫을 때 혹은 브라우저 창을 닫을 때 이벤트가 발생한다.
- change – 폼 필드의 상태가 변경되었을 때 발생한다. 라디오 버튼을 클릭하거나 셀렉트 박스에서 값을 선택하는 경우를 예로 들수 있다.
이벤트 처리하기
-addEventListener(1, 2, 3) : 이벤트가 발생한 요소에 이벤트 처리기를 연결해 주는 함수
- 처리할 이벤트 지정(on 붙이지않음)
- 이벤트가 발생했을 때 실행할 명령을 나열하거나 따로 함수를 만들었다면 함수 이름을 지정
- 이벤트를 캡처링하는지 여부를 지정, 생략 가능/ true면 캡처링, false면 버블링
콜백 함수
- 이벤트 처리기는 콜백 함수로 구현
- 콜백 함수는 함수 안에서 함수를 선언하고 그 함수를 반환하는 함수
이벤트 버블링
- 하위 요소에서 이벤트가 발생하면 상위 요소로 이벤트가 전달되는 현상
- 이벤트 버블링을 이용하면 하위 요소에서 처리된 이벤트를 상위 요소에서도 처리 가능
이벤트 캡쳐링
- 상위 요소에서 이벤트가 발생하면 하위 요소로 이벤트가 전달되는 현상
- 이벤트 캡쳐링을 이용하면 상위 요소에서 처리된 이벤트를 하위 요소에서도 처리 가능
이벤트 제거하기
- removeEventListener(1, 2, 3) : 이벤트 처리기를 제거해주는 함수
이벤트 객체
- 이벤트가 발생할 때, 이벤트 정보를 담은 객체가 생성됨
- 이벤트 객체를 이용하면 이벤트가 발생한 대상을 찾고, 이벤트가 발생한 위치 등의 정보를 얻을 수 있음
- 이벤트 객체의.preventDefault() 메소드를 호출하면 기본 동작을 취소할 수 있음
이벤트 객체
- 공통 속성
속성 설명
| type | 이벤트 이름 |
| target | 이벤트가 발생한 요소 |
| currentTarget | 이벤트 핸들러가 등록된 요소 |
| timeStamp | 이벤트 발생 시각 |
| bubbles | 버블링 단계인지를 판단하는 값 |
addEventListener에서 함수에 parameter를 전달하고 싶다면, 익명을 함수를 사용해야함