61일차 (리액트에서 자주 쓰이는 이벤트의 타입)

Button

// onClick
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {};

// onMouseDown
const handleMouseDown = (event: React.MouseEvent<HTMLButtonElement>) => {};

// onMouseUp(눌렀다 뗐을 때)
const handleMouseUp = (event: React.MouseEvent<HTMLButtonElement>) => {};

// onMouseEnter (마우스가 요소 위로 올라갔을 때)
const handleMouseEnter = (event: React.MouseEvent<HTMLButtonElement>) => {};

// onMouseLeave (마우스가 요소를 벗어났을 때)
const handleMouseLeave = (event: React.MouseEvent<HTMLButtonElement>) => {};

 

 

input

// onChange (텍스트 변경 시)
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {};

//onFocus (포커스 획득 시)
const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {};

 

 

Form

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {};

const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {};

const handleSelect = (event: React.SyntheticEvent<HTMLSelectElement>) => {};

const handleInput = (event: React.FormEvent<HTMLInputElement>) => {};

 

Mouse

const handleMouseEnter = (event: React.MouseEvent<HTMLDivElement>) => {};

const handleMouseLeave = (event: React.MouseEvent<HTMLButtonElement>) => {};

const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {};

const handleDoubleClick = (event: React.MouseEvent<HTMLDivElement>) => {};

 

 

KeyBoard

const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {};

const handleKeyUp = (event: React.KeyboardEvent<HTMLInputElement>) => {};

const handleKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {};