OnClick-Ereignistyp in TypeScript

1. die Schnittstelle onClick MouseEvent in TypeScript
2. Verwenden Sie das onClick MouseEvent in React
3. Erweitern Sie das Interface MouseEvent in TypeScript

Das onClick-Ereignis wird ausgelöst, wenn der Benutzer auf einen Teil einer HTML-Seite klickt, bei dem es sich um Text, Bild oder Zahl handeln kann. Viele Attribute sind mit einem Klickereignis verknüpft, von denen einige verwendet werden können, um bestimmte Funktionalitäten zu erreichen.

Es gibt verschiedene Möglichkeiten, um onClick-Ereignisse in TypeScript zu umgehen. Dieses Tutorial zeigt einige Möglichkeiten auf, wie dies erreicht werden kann.

die Schnittstelle onClick MouseEvent in TypeScript

Die onClick- oder MouseEvent-Schnittstelle ist eine reichhaltige Schnittstelle mit vielen Eigenschaften, die verwendet werden können, um dem Code Funktionalität hinzuzufügen.

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;
}

Verschiedene Attribute beziehen sich auf unterschiedliche Tastendruckereignisse oder Standortinformationen, die einem Mausklickereignis zugeordnet sind. Die altKey zeigt an, ob die Alt-Taste gedrückt war oder nicht, wenn ein bestimmtes Mausereignis eintritt.

Der button zeigt an, welche Maustaste während eines Klickereignisses gedrückt wurde: 0 für den Hauptbutton, 1 für den Hilfsbutton usw. Weitere Informationen zum Attribut button finden Sie hier.

clientX und clientY beziehen sich auf die Fließkommawerte der horizontalen und vertikalen Koordinate innerhalb des Darstellungsbereichs der Anwendung, an dem das Ereignis aufgetreten ist. ctrlKey gibt an, ob die alt-Taste gedrückt wurde oder nicht, wenn ein bestimmtes Mausereignis auftritt.

pageX und pageY beziehen sich auf die Fließkommawerte der horizontalen und vertikalen Koordinaten, auf die mit der Maus geklickt wurde. Dies ist relativ zum gesamten Dokument (einschließlich aller Teile des Dokuments, die nicht sichtbar sind).

screenX und screenY beziehen sich auf die Fließkommawerte der horizontalen und vertikalen Koordinaten des Mauszeigers in globalen (Bildschirm-)Koordinaten. Die Attribute movementX und movementY beziehen sich auf die Unterschiede zwischen dem aktuellen mousemove-Ereignis und dem vorherigen mousemove-Ereignis.

Verwenden Sie das onClick MouseEvent in React

Das MouseEvent kann bei einem onClick-Event in React ausgelöst werden. Das folgende Codesegment zeigt, wie das funktioniert:

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>
    )
}

Die Eigenschaft currentTarget des Ereignisses gibt uns Zugriff auf das Element, an das der Ereignis-Listener angehängt ist. Die Eigenschaft Ziel des Ereignisses bezieht sich auf das Element, das das Ereignis ausgelöst hat.

Das MouseEvent kann zu HTMLElement verallgemeinert werden, um alle HTML-Tags oder andere spezielle Tags wie HTMLDivElement zu akzeptieren.

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>
    )
}

Erweitern Sie das Interface MouseEvent in TypeScript

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

So kann das Attribut extraField zur Behandlung spezieller Ereignisse beim Anklicken einiger Elemente im DOM verwendet werden.