브라우저 이벤트

브라우저이벤트
마우스
click, contextmenu : 마우스 왼쪽, 오른쪽 클릭, 
mouseover, mouseout : 커서가 요소 위 요소 밖으로 움직일 때, 
mousedown, mouseup : 마우스 왼쪽 누르고 있을 때, 뗄 때
mousemove : 움직일 때
폼 : submit focus
키보드 : keydown, keyup 키 누르거나 뗼 때
DOMContentLoaded: DOM생성이 완료되었을 때
css : transitionend 트랜지션 종료 시 

이벤트 핸들러
elm.onclick = function(event) 식으로 이벤트를 추가할 수 있음.
핸들러 제거 elm.onclick = null;
핸들러 내부 this는 요소를 가르킨다.
addEventListener : 함수를 객체나 클래스에 할당할 수 있다. 
elem.addEventListener('click', obj or class)
핸들이벤트 여러개를 사용할 때 클래스 메소드로 구성하면 코드가 깔끔하다.
let obj = {
  handleEvent(e) {alert()}
}

class Menu {
  handleEvent(event) {}
}

이벤트 버블링
중첩된 요소에서 최하단 요소의 핸들러를 클릭하면 자식을 감싸고 있는 
부모들의 이벤트도 동작된다.
최상단에만 이벤트를 할당하여도 자식요소들이 동작한다.
e.target e.currentTarget 차이
e.target : 실제 클릭한 요소.	
e.currentTarget : this로써 핸들러가 있는 곳의 요소

캡쳐링
버블링과 반대로 일어나는 흐름 
addEventListener(event,function, true) true로 해줘야 반대로 일어남.

커스텀 이벤트 디스패치
let event = new Event(type, [options]); type은 내장이벤트나 커스텀이벤트가 가능. 
option은 bubbles : true/false (버블링) cancelable : true/false 
브라우저 기본동작 true이면 e.preventDefault() 사용가능 
기본적으로 option은 둘다 false이다.

이벤트 실행 : elem.dispatchEvent(event)
커스텀이벤트는 addEventListener(커스텀,func) 로 행동을 만들고 
new Event(커스텀) 생성, elem.dispatchEvent(new Event)로 실행한다.

커스텀이벤트를 만들때에 new Event만이 아닌 이미 구현되어있는 
MouseEvent, FocusEvent등의 UI 이벤트들이 있는데 option에 관련메소드를 
사용하기 위해서는 구현된 클래스로 이벤트를 생성하는 것이 좋다 
ex) 클릭이벤트의 경우 new MouseEvent('click', {clinetX : 100}) 버블링, 브라우저 
기본동작 외의 clientX 같은 props가 있다.

new CustomEvent로 생성할 경우 option에 detail 프로퍼티가 추가되고 그안에 원하는 
정보를 객체로 담을 수 있기 때문에 new Event 보다 CustomEvent를 사용하는 것이 좋다
중첩이벤트를 사용할 때에도 가능
커스텀이벤트는 결국 이벤트를 자동으로 실행시켜주는 것이기 때문에 
원하는 순서에 넣을 수 있다는 장점이 있다.

마우스 이벤트

마우스 이벤트
mousedown, mouseup,
mouseover, mouseout : 요소 안으로 움직일 때, 바깥으로
mousemove
click, dblclick, contextmenu

마우스 이벤트를 사용했을 때 지원 event prop
event.button
왼쪽 0 가운데 1 오른쪽 2 뒤로가기 3 앞으로가기 4

보조키 prop boolean
event.shiftKey/artKey/ctrlKey/metakey 보조키 사용이 true일 때 이벤트가 
동작하도록 만들 수 있음. MacOS에서는 ctrl+클릭은 contextmenu이므로 
if(e.ctrilKey || e.metaKey) 로 둘다 지원하게 하는 것이 좋음

e.clientX, clientY, pageX, pageY : 클라이언트 좌표, 페이지 좌표
클라이언트 좌표는 스크롤에 상관없이 위치에 따른 값 고정, 페이지좌표는 왼쪽 창 상단부를 
기준으로 좌표값이 상이하다.

마우스 드래그로 글자영역 선택되는 것 막는 법 : mousedown 이벤트에
e.preventDefault()

참고

https://ko.javascript.info/