TypeScript의 OnClick 이벤트 유형

1. TypeScript의 onClick MouseEvent 인터페이스
2. React에서 onClick MouseEvent 사용
3. TypeScript에서 MouseEvent 인터페이스 확장

onClick 이벤트는 사용자가 텍스트, 이미지 또는 숫자가 될 수 있는 HTML 페이지의 일부를 클릭할 때 트리거됩니다. 많은 속성이 클릭 이벤트와 연관되며 그 중 일부는 특정 기능을 달성하는 데 사용될 수 있습니다.

TypeScript에서 onClick 이벤트를 해결하는 다양한 방법이 있습니다. 이 자습서에서는 이를 달성할 수 있는 몇 가지 방법을 보여줍니다.

TypeScript의 onClick MouseEvent 인터페이스

onClick 또는 MouseEvent 인터페이스는 코드에 기능을 추가하는 데 사용할 수 있는 많은 속성이 있는 풍부한 인터페이스입니다.

interface MouseEvent<T = Element, E = NativeMouseEvent> extends UIEvent<T,E> {
    altKey: boolean;
    button: number;
    buttons: number;
    clientX: number;
    clientY: number;
    ctrlKey: boolean;
    movementX: number;
    movementY: number;
    pageX: number;
    pageY: number;
    relatedTarget: EventTarget | null;
    screenX: number;
    screenY: number;
    shiftKey: boolean;
}

다양한 속성은 다양한 키 누르기 이벤트 또는 마우스 클릭 이벤트와 관련된 위치 정보를 참조합니다. altKey는 주어진 마우스 이벤트가 발생할 때 Alt 키를 눌렀는지 여부를 나타냅니다.

버튼은 클릭 이벤트 중에 어떤 마우스 버튼이 눌렸는지 나타냅니다. 메인 버튼은 0, 보조 버튼은 1 등입니다. 버튼 속성에 대한 자세한 내용은 여기에서 확인할 수 있습니다.

clientX 및 clientY는 이벤트가 발생한 애플리케이션의 뷰포트 내 수평 및 수직 좌표의 부동 소수점 값을 나타냅니다. ctrlKey는 주어진 마우스 이벤트가 발생할 때 alt 키가 눌렸는지 여부를 나타냅니다.

‘pageX’ 및 ‘pageY’는 마우스를 클릭한 수평 및 수직 좌표의 부동 소수점 값을 나타냅니다. 이것은 전체 문서에 상대적입니다(보이지 않는 문서 부분 포함).

‘screenX’ 및 ‘screenY’는 전역(화면) 좌표에서 마우스 포인터의 수평 및 수직 좌표의 부동 소수점 값을 나타냅니다. movementX 및 movementY 속성은 현재 mousemove 이벤트와 이전 mousemove 이벤트 간의 차이를 나타냅니다.

React에서 onClick MouseEvent 사용

MouseEvent는 React의 onClick 이벤트에서 트리거될 수 있습니다. 다음 코드 세그먼트는 이것이 어떻게 작동하는지 보여줍니다.

const ButtonComponent = () => {

    const handleButtonClick = (event : React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
        console.log(event.target);
        console.log(event.currentTarget);
    }

    return (
        <div>
            <button onClick={handleButtonClick}>Click me</button>
        </div>
    )
}

이벤트의 currentTarget 속성은 이벤트 리스너가 연결된 요소에 대한 액세스를 제공합니다. 이벤트의 target 속성은 이벤트를 트리거한 요소를 나타냅니다.

MouseEvent는 HTMLElement로 일반화되어 모든 HTML 태그 또는 HTMLDivElement와 같은 기타 특수 태그를 허용할 수 있습니다.

const DivComponent = () => {

    const handleDivClick = (event : React.MouseEvent<HTMLDivElement, MouseEvent>) => {
        console.log(event.target);
        console.log(event.currentTarget);
    }

    return (
        <div>
            <div onClick={handleDivClick}>Hi I am a div</div>
        </div>
    )
}

TypeScript에서 MouseEvent 인터페이스 확장

interface CustomEventHandler extends MouseEvent<HTMLElement> {
    extraField : number
}

따라서 extraField 속성은 DOM의 일부 요소를 클릭할 때 특수 이벤트를 처리하는 데 사용할 수 있습니다.