Tipo de evento OnClick en TypeScript

1. la interfaz onClick MouseEvent en TypeScript
2. Usa el onClick MouseEvent en React
3. Ampliar la interfaz MouseEvent en TypeScript

El evento onClick se activa cuando el usuario hace clic en alguna parte de una página HTML que puede ser texto, imagen o número. Muchos atributos están asociados con un evento de clic, algunos de los cuales se pueden usar para lograr funcionalidades específicas.

Hay varias formas de solucionar los eventos onClick en TypeScript. Este tutorial demostrará algunas de las formas en que esto se puede lograr.

la interfaz onClick MouseEvent en TypeScript

La interfaz onClick o MouseEvent es una interfaz rica con muchas propiedades que se pueden usar para agregar funcionalidad al código.

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

Varios atributos se refieren a diferentes eventos de pulsación de tecla o información de ubicación asociada con un evento de clic del mouse. La tecla alt indica si se presionó o no la tecla Alt cuando se produce un determinado evento del ratón.

El botón indica qué botón del ratón se presionó durante un evento de clic: 0 para el botón principal, 1 para el botón auxiliar, etc. Se puede encontrar más información sobre el atributo botón aquí.

clientX y clientY se refieren a los valores de punto flotante de la coordenada horizontal y vertical dentro de la ventana gráfica de la aplicación en la que ocurrió el evento. ctrlKey indica si se presionó o no la tecla alt cuando se produce un evento de mouse dado.

pageX y pageY se refieren a los valores de punto flotante de las coordenadas horizontales y verticales en las que se hizo clic con el mouse. Esto es relativo a todo el documento (incluye cualquier parte del documento que no sea visible).

screenX y screenY se refieren a los valores de coma flotante de las coordenadas horizontales y verticales del puntero del mouse en coordenadas globales (pantalla). Los atributos movementX y movementY se refieren a las diferencias entre el evento moveMove actual y el evento moveMove anterior.

Usa el onClick MouseEvent en React

El MouseEvent se puede activar en un evento onClick en React. El siguiente segmento de código demostrará cómo funciona esto:

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

La propiedad currentTarget en el evento nos da acceso al elemento al que está adjunto el detector de eventos. La propiedad objetivo en el evento se refiere al elemento que desencadenó el evento.

El MouseEvent se puede generalizar a HTMLElement para aceptar todas las etiquetas HTML o para cualquier otra etiqueta especial como 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>
    )
}

Ampliar la interfaz MouseEvent en TypeScript

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

Por lo tanto, el atributo extraField se puede usar para manejar eventos especiales al hacer clic en algunos elementos en el DOM.