[javascript] 자바스크립트 이벤트와 이벤트 헨들러

MDN에서 가장 일반적인 카테고리를 참고했다.

그 외 더 자세한 정보는 하단의 참고 페이지 링크에서 확인

 

이벤트 사용법

Element.addEventListner('click',(e)=>{
	//클릭되었을 때의 코드
    // e.target
    // e.type
    // e.screenX
    // e.screenY
    // e.ctrlKey 
    // e.altKey ... ETC  
})

 

이벤트 핸들러 사용법

- 이벤트 앞에 on을 붙히면 된다.

- HTML은 대,소문자를 구분하지 않지만 리액트 등에서는 구분을 해서 써 주어야 한다.

<button onClick="test(event)">버튼</button>

<script>
  function test(e){
  	console.log(e.target);
  };
  //let test=(e)=>{
  	//console.log(e.target);
  //};
</script>

 

핸들링 제거

<button onclick="test(event)">버튼</button>

<script>
    let btn = document.querySelector('button');
    
    let test = (e)=>{
        console.log(e.target);
    }
    
    btn.onclick = null;
    
</script>

마우스 이벤트

* 포인팅 장치 :  pc는 마우스, 모바일은 손 등

이벤트	이벤트 핸들러	발생하는 시점
click	onClick	포인팅 장치 버튼이 엘리먼트에서 눌렸다가 놓였을 때.
dblclick	onDblClick	포인팅 장치 버튼이 엘리먼트에서 두 번 클릭되었을 때.
wheel	onWheel	포인팅 장치의 휠 버튼이 어떤 방향이든 회전되었을 때.
mouseenter	onMouseEnter	포인팅 장치가 리스너가 등록된 엘리먼트 위로 이동했을 때. 이벤트가 걸린 자기자신 엘리먼트
mouseleave	onMouseLeave	포인팅 장치가 리스너가 등록된 엘리먼트 밖으로 이동했을 때. 이벤트가 걸린 자기자신 엘리먼트
mouseover	onMouseOver	포인팅 장치가 리스너가 등록된 엘리먼트나 그 자식 엘리먼트의 위로 이동했을 때. 이벤트가 걸린 자기자신 엘리먼트 + 자식엘리먼트
mouseout	onMouseOut	포인팅 장치가 리스너가 등록된 엘리먼트 또는 그 자식 엘리먼트의 밖으로 이동했을 때. 이벤트가 걸린 자기자신 엘리먼트 + 자식엘리먼트
mousemove	onMouseMove	포인팅 장치가 엘리먼트 위에서 이동하는동안 계속 실행
mousedown	onMouseDown	엘리먼트 위에서 포인팅 장치 버튼을 눌렸을 때.
mouseup	onMouseUp	엘리먼트 위에서 포인팅 장치 버튼을 눌렀다 뗐을 때.
auxclick	onAuxclick	포인팅 장치의 버튼중 주 버튼이아닌 버튼이 엘리먼트에서 눌렸다가 놓였을 때.(마우스를 예로 우버튼, 옵션버튼...)
contextmenu	onContextMenu	마우스의 오른쪽 버튼이 클릭되었을 때(컨텍스트 메뉴가 표시되기 전).
select	onSelect	어떤 텍스트가 선택되고 있을 때.

 

폼 이벤트

* form 태그와 인풋, 버튼과 함께 사용

이벤트	이벤트 핸들러	발생하는 시점
reset	onReset	reset 버튼이 눌렸을 때. Button type="reset"
submit	onSubmit	submit 버튼이 눌렸을 때. Button type="submit"

 

 

키보드 이벤트

이벤트	이벤트 핸들러	발생하는 시점
keydown	onKeydown	키가 눌렸을 때
keyup	onKeyup	키 누름이 해제될 때
keypress	onKeypress	키보드를 누를때 계속 실행 Deprecated

 

포커스 이벤트

이벤트	이벤트 핸들러	발생하는 시점
focus	onFocus	엘리먼트가 포커스를 받았을 때(버블링하지 않음).
blur	onBlur	엘리먼트가 포커스를 잃었을 때(버블링하지 않음).

 

CSS 애니메이션 이벤트

이벤트	이벤트 핸들러	발생하는 시점
animationstart	onAnimationstart	CSS 애니메이션이 시작되었을 때.
animationend	onAnimationend	CSS 애니메이션이 완료되었을 때.
animationiteration	onAnimationiteration	CSS 애니메이션이 반복되었을 때.

참고 : https://developer.mozilla.org/ko/docs/Web/Events