焦点事件

当元素获得焦点时,浏览器会触发其上的focus事件。当失去焦点时,元素会获得blur事件。

与前文讨论的事件不同,这两个事件不会传播。子元素获得或失去焦点时,不会激活父元素的处理器。

下面的示例中,文本域在拥有焦点时会显示帮助文本。

  1. <p>Name: <input type="text" data-help="Your full name"></p>
  2. <p>Age: <input type="text" data-help="Your age in years"></p>
  3. <p id="help"></p>
  4. <script>
  5. let help = document.querySelector("#help");
  6. let fields = document.querySelectorAll("input");
  7. for (let field of Array.from(fields)) {
  8. field.addEventListener("focus", event => {
  9. let text = event.target.getAttribute("data-help");
  10. help.textContent = text;
  11. });
  12. field.addEventListener("blur", event => {
  13. help.textContent = "";
  14. });
  15. }
  16. </script>

当用户从浏览器标签或窗口移开时,窗口对象会收到focus事件,当移动到标签或窗口上时,则收到blur事件。