이벤트 객체의 target과current Target의 차이점 및 관련 Type Script의 행동을 조사했습니다.

16512 단어 HTMLJavaScriptReactTypeScriptWebtech
안녕하세요.
갑작스럽게event.target와event.currentTarget는 어떻게 구분해서 사용합니까?
원래 차이가 있나요?그렇게 생각할지도 몰라.
단도직입적으로 말하면 매우 많다.사용 방법에 따라 오류가 발생할 수밖에 없다.그나저나 내 상황이 생겼어.(두 시간 정도 걸려서 디버깅한 건 또 다른 말)
오늘은 두 속성의 차이점과 Type Script에 미치는 영향에 대해 살펴보겠습니다.
웹 API의 사양입니다. React와 관계없이 참조 코드는 React입니다.
쓰여 있다.
예를 들어 다음과 같은 코드가 있다고 가정해 보세요.
function App() {
  const onClick = (e) => {
    console.log(e.target);
    console.log(e.currentTarget);
  };
  return (
    <button onChange={onClick}>
      <strong>Click me</strong>
    </button>
  );
}
언뜻 보면 수출이 같은 요소라고 생각하기 쉬우나 실제로는 다르다.
console.log(e.target); // <strong>Click me</strong>
console.log(e.currentTarget); // <button>...</button>
는 위에서 말한 바와 같이 e.target는strong요소이고 e.currentTarget는button요소이다.
왜냐하면, 여기.에 기재된 바와 같이
  • e.target는 사건 발생의 원인
    • 이다.
  • e.currentTarget는 이벤트 처리 프로그램이 실제적으로 부여된 요소
    • 이다.
    그래서
    이것을 잘 이해하려면 가동 용수철의 구조를 알아야 한다.
    쉽게 말해 사건 발생 후 바로 위 부모 요소로 옮겨 같은 일을 하다가 맨 위<html />에 도달할 때까지 반복하는 메커니즘이다.
    이것을 마음에 두고 target와currentTarget의 출력 결과를 다시 한 번 보세요.
    이것이야말로 아하의 체험이지, 나한테는 잘 어울려.
    실제 클릭의 요소(사건 발생을 초래하는 요소)는strong 요소입니다.
    활동의 기본 요소(사건 처리 프로그램이 실제적으로 부여된 요소)는 button 요소이다.
    그러게 말이야.
    그리고 왜 사용e.target하면 버그가 발생하기 쉬운지도 아까 설명한 주요 원인과 관련이 있다.
    예를 들어 위의 코드로 button 요소를 지정하려면strong 요소를 지정한다.
    그러니까 확실성이 없다는 거야.
    그래서 나는 이 글에서 가능한 한 사용하라고 말하고 싶다e.currentTarget.

    TypeScript


    또한 e.currentTarget를 사용해도 타입 스크립트의 혜택을 받을 수 있다.
    예를 들어 다음과 같은 코드가 있다고 가정해 보세요.
    function App() {
  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
    // 通る
    console.log(e.currentTarget.value);
    // エラー
    console.log(e.target.value);
  }
  return (
      <button onClick={handleClick}>
        <strong>Click me</strong>
      </button>
  );
    활동 유형을 잘 설정했어도e.target.value
    Property 'value' does not exist on type 'EventTarget'
    이렇게 혼났어요.
    (여기는const value = e.target as HTMLButtonElement 이런 역할 분배, 이런 모델은 비교적 흔하다)
    왜냐하면, 방금 말한 바와 같이e.target는 사건 발생의 원인이다
    따라서 Type Script에서는 어떤 요소가 기원인지 알 수 없습니다.
    // 例：

function App() {
  return (
    <button>
      <span>
        <span>
          <strong>...</strong>
          {/* ここがイベント発生源だったとしても、TypeScript はわからないので自分でキャストする必要がある */}
        </span>
      </span>
    </button>
  );
}
    ,e.currentTarget예
    실제 권한 부여된 이벤트 처리 프로그램 요소
    따라서 Type Script에서 올바른 서식이 적용된 정보는currentTarget로 이해할 수 있습니다.
    번거로운 배역이 필요 없다는 얘기다.

    덤


    target과current Target로 게임을 많이 하다가 불가사의한 행동을 당했어요.
    코드는 다음과 같습니다.
    export default function App() {
  const [name, setName] = React.useState("");
  function handleSetName(e: React.ChangeEvent<HTMLInputElement>) {
    // 通る
    console.log(e.currentTarget.classList);
    // これもなぜか通る？？？
    console.log(e.target.classList);
  }
  return (
    <form onSubmit={(e) => console.log(e)}>
      <input value={name} onChange={handleSetName} />
      <button type="submit">Submit</button>
    </form>
  );
}
    온체인지의 활동은 모두 활동해야 하는데 왜 인풋의 온체인지만 허용되는 걸까.
    다방면의 조사를 거쳐 여기. 이유를 진술하였다.
    onChange 프로세서는 e.target과 행동이 다릅니다. 이벤트 프로세서가 등록의 요소가 되는 것을 보장하기 때문에 문제가 없습니다.
    듣건대
    실제로react.d.ts보면
    // index.d.ts:1153

interface ChangeEvent<T = Element> extends SyntheticEvent<T> {
  target: EventTarget & T;
}
    는 MouseEvent와 다른 T가 지정한 요소형을 target에 연결하여 채웁니다.
    에이~
    참고로 다른 프레임워크가 유형을 어떻게 정의하는지 몰라요!
    끝까지 읽어주셔서 감사합니다~
    UITTableView의 경계 문자에서 하위 뷰를 호출하고 데이터 전송
    일주일의 걸음 수를 얻다

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage