åç´ ï¼focus äºä»¶

åºçº¿ å¹¿æ³å¯ç¨

focus ä¸ blur æ£å¥½ç¸åã

è¯¥äºä»¶ä¸å¯åæ¶ï¼ä¹ä¸ä¼åæ³¡ã

è¯æ³

addEventListener("focus", (event) => {});

onfocus = (event) => {};

äºä»¶å±æ§

è¯¥æ¥å£è¿ä»å¶ç¶çº§ UIEvent å Event ç»§æ¿å±æ§ã

FocusEvent.relatedTarget: ä¸ä¸ª EventTargetï¼è¡¨ç¤ºæ¤äºä»¶çæ¬¡è¦ç®æ ãå¨æäºæåµä¸ï¼ä¾å¦åæ¢å°å½åæ ç¾é¡µæç¦»å¼å½åæ ç¾é¡µï¼ï¼å¤äºå®å¨åå ï¼è¯¥å±æ§å¯è½ä¼è¢«è®¾ç½®ä¸º nullã

ç¤ºä¾

ç®åç¤ºä¾

HTML

html

<form id="form">
  <input type="text" placeholder="text input" />
  <input type="password" placeholder="password" />
</form>

ç»æ

äºä»¶å§æ

æ¤äºä»¶æä¸¤ä¸ªå¯ä»¥å®ç°äºä»¶å§æçæ¹æ³ï¼éè¿å¨æ¯æçæµè§å¨ä¸ä½¿ç¨ focusin äºä»¶ï¼æèéè¿è®¾ç½® addEventListener() çåæ°useCapture å¼ä¸º trueã

HTML

html

<form id="form">
  <input type="text" placeholder="text input" />
  <input type="password" placeholder="password" />
</form>

JavaScript

const form = document.getElementById("form");

form.addEventListener(
  "focus",
  (event) => {
    event.target.style.background = "pink";
  },
  true,
);

form.addEventListener(
  "blur",
  (event) => {
    event.target.style.background = "";
  },
  true,
);