[javascript] 이벤트 핸들러

1.이벤트 핸들러 등록

• onclick 중복사용시 뒤에 있는 값으로 적용됨
• Element.addEventListner('type', 'handler') 권장되는 방식, 중복사용 가능

2.이벤트 핸들러 삭제

• Element.addEventListner('type', 'handler') 메소드로 이벤트 핸들러 등록시 Element.removeEventListner('type', 'handler') 로 이벤트 핸들러 삭제 가능 (외부에 함수 선언 후 이벤트 등록 시 삭제 가능)

  element.addEventListener("mousedown", handleMouseDown);
  element.removeEventListener("mousedown", handleMouseDown);  

3.이벤트 객체 프로퍼티

이벤트가 발생하면 이벤트 핸들러의 첫번째 파라미터에는 자동으로 이벤트 객체 전달되며 이벤트 종류마다 가지고 있는 프로퍼티가 다름

공통 프로퍼티

type 이벤트 이름('click','mouseup','keydown')
target 이벤트가 발생한 요소
relatedTarget 이벤트가 발생한 요소와 직접적으로 상호작용한 요소를 참조한다. 이 속성은 mouseover, mouseout, focusin, focusout 이벤트에서 사용된다.(target과 반대요소)
currentTarget 이벤트 핸들러가 등록된 요소

Ex) mouseover 이벤트
target: 마우스 포인터가 올라간 요소
relatedTarget 이전에 마우스 포인터가 위치한 요소
Ex) mouseout 이벤트
target 마우스 포인터가 벗어난 요소
relatedTarget 마우스 포인터가 이동한 다른 요소
Ex) focusin 이벤트
target은 포커스를 받은 요소를
relatedTarget은 포커스를 잃은 요소
Ex) focusout 이벤트
target은 포커스를 잃은 요소
relatedTarget은 포커스를 얻은 다른 요소

마우스 이벤트 프로퍼티

mousedown 마우스 버튼을 누르는 순간
mouseup 마우스 버튼을 눌렀다 떼는 순간
click 왼쪽 버튼을 클릭한 순간
dblclick 왼쪽 버튼을 빠르게 두 번 클릭한 순간
contextmenu 오른쪽 버튼을 클릭한 순간
mousemove 마우스를 움직이는 순간
mouseover 마우스 포인터가 요소 위로 올라온 순간
mouseout 마우스 포인터가 요소에서 벗어나는 순간
mouseenter 마우스 포인터가 요소 위로 올라온 순간 (버블링이 일어나지 않음)
mouseleave 마우스 포인터가 요소에서 벗어나는 순간 (버블링이 일어나지 않음)
relatedTarget mouseenter, mouseleave, mouseover, mouseout 이벤트에 존재하는 프로퍼티로 이벤트가 발생하기 직전(또는 직후)에 마우스가 위치해 있던 요소를 담고 있습니다.

마우스 위치 프로퍼티

clientX, clientY 마우스 포인터의 브라우저 표시 영역에서의 위치
pageX, pageY 마우스 커서의 문서 영역에서의 위치
offsetX, offsetY 마우스 포인터의 이벤트 발생한 요소에서의 위치
screenX, screenY 마우스 포인터의 모니터 화면 영역에서의 위치

키보드 이벤트 프로퍼티

keydown 키보드의 버튼을 누르는 순간
keyup 키보드의 버튼을 눌렀다 떼는 순간
key 사용자가 누른 키가 가지고 있는 값
code 누른 키의 물리적인 위치

input 태그 프로퍼티

focusin 요소에 포커스가 되는 순간
focusout 요소에 포커스가 빠져나가는 순간
focus 요소에 포커스가 되는 순간 (버블링이 일어나지 않음)
blur 요소에 포커스가 빠져나가는 순간 (버블링이 일어나지 않음)
change 입력된 값이 바뀌는 순간(focus 빠져나올때 발생)
input 값이 입력되는 순간
select 입력 양식의 하나가 선택되는 순간
submit 폼을 전송하는 순간

스크롤 이벤트

scroll 이벤트는 보통 window 객체에 이벤트 핸들러를 등록하고 window 객체의 프로퍼티와 함께 자주 활용되며 특히 scrollY 프로퍼티를 활용하면 스크롤된 특정한 위치를 기준으로 이벤트 핸들러가 동작하게 하거나 혹은 스크롤 방향(위로 스크롤 중인지/아래로 스크롤 중인지)을 기준으로 이벤트 핸들러가 동작하게끔 활용할 수도 있다.

4. 이벤트 버블링

자식 요소에서 부모요소로 이벤트가 전파되는 것을 이벤트 버블링이라고 부르며 이벤트 객체의 stopPropagation() 메소드로 전파를 막을 수 있다. (파라미터 값 필요x)

5. 이벤트 위임

이벤트 핸들러를 부모에게 위임하여 자식 전체에 이벤트가 발생하도록 하는 것이다. 주로 자식 요소의 추가 등이 있을 때 사용하며 자식에게만 적용시키기 위해 조건문과 같이 사용하기도 한다.

6. preventDefault

브라우저의 각 태그별 약속된 동작을 막고 싶다면 preventDefault로 막을 수 있다.