n/a.ターゲット

6.イベントの処理

<!-- HTML -->
<button onclick="activateLasers()">
  Activate Lasers
</button>

// React
<button onClick={activateLasers}>
  Activate Lasers
</button>

6-1. 合成イベント

<form onsubmit="console.log('You clicked submit.'); return false">
  <button type="submit">Submit</button>
</form>

function Form() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log('You clicked submit.');
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

export default function Event() {
  const onClick = (e) => {
    console.dir(e);
  };

  return (
    <div>
      <button onClick={onClick}>button</button>
    </div>
  );
}

6-2. イベントフロー

<style>
  body * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>

<form>FORM</form>

<script>
  for (let elem of document.querySelectorAll('*')) {
    elem.addEventListener("click", e => console.log(`캡쳐링: ${elem.tagName}`), true);
    elem.addEventListener("click", e => console.log(`버블링: ${elem.tagName}`));
  }
  
  document.querySelector("form").onclick = function () {
    console.log("click");
  };
</script>

// 결과
"Capturing: HTML"
"Capturing: BODY"
"Capturing: FORM"
"Bubbling: FORM"
"click"
"Bubbling: BODY"
"Bubbling: HTML"

6-2-1. レスポンス中のイベントフロー

export default function Event() {
  const onClickCaputreParent = () => {
    console.log("onClickCaputreDivParent");
  };

  const onClickCaputreChild = () => {
    console.log("onClickCaputreDivChild");
  };

  const onClickCaputreButton = () => {
    console.log("onClickCaputreButton");
  };

  const onClickBubbleParent = () => {
    console.log("onClickBubbleDivParent");
  };

  const onClickBubbleChild = () => {
    console.log("onClickBubbleDivChild");
  };

  const onClickBubbleButton = (e) => {
    console.log("onClickBubbleButton");
    console.log(e);
  };

  return (
    <div onClickCapture={onClickCaputreParent} onClick={onClickBubbleParent}>
      <div onClickCapture={onClickCaputreChild} onClick={onClickBubbleChild}>
        <button
          onClickCapture={onClickCaputreButton}
          onClick={onClickBubbleButton}
        >
          button
        </button>
      </div>
    </div>
  );
}

// 결과
"onClickCaputreDivParent"
"onClickCaputreDivChild"
"onClickCaputreButton"
"onClickBubbleButton"
SyntheticBaseEvent {_reactName: 'onClick', _targetInst: null, type: 'click', nativeEvent: PointerEvent, target: button, …}
"onClickBubbleDivChild"
"onClickBubbleDivParent"

6-3. イベントのタイプ

function Example() {
  return (
    <input
      onFocus={(e) => {
        console.log('Focused on input');
      }}
      onBlur={(e) => {
        console.log('Triggered because this input lost focus');
      }}
      placeholder="onFocus is triggered when you click this input."
    />
  )
}

ソース