JavaScript 参考手册 目录

onfocusin 事件

在 Web 前端开发中,我们经常会用到各种事件来实现交互效果。其中,onfocusin 事件是一个在元素获得焦点时触发的事件。相较于普通的 focus 事件,onfocusin 事件更具有优势,因为它是冒泡的,可以在父元素上捕获到子元素的焦点事件。

语法

onfocusin 事件的语法非常简单,只需要在需要绑定事件的元素上添加相应的事件监听即可:

--------- -----
------
------
  ---------------- ------------
-------
------

------ ----------- ----------------

--------
----------------------------------------------- - ---------- -
  ------------ ----- --- ---------
--
---------

-------
-------

在上面的示例中,当输入框获得焦点时,会弹出一个提示框显示 "Input field has focus!"。

示例

下面我们来看一个更加实际的示例,假设我们有一个表单,其中包含多个输入框,我们希望在任意一个输入框获得焦点时改变其背景颜色:

--------- -----
------
------
  ---------------- ------------
  -------
    -------- -
      ----------------- ----------
    -
  --------
-------
------

------
  ------ ----------- -------------------
  ------ ----------- -------------------
  ------ ----------- -------------------
-------

--------
--- ----------- - ----------------------------------------------

--- ---- - - -- - - ------------------- ---- -
  ------------------------ - ---------- -
    ------------------------------
  --

  ------------------------- - ---------- -
    ---------------------------------
  --
-
---------

-------
-------

在上面的示例中,我们通过遍历所有的输入框元素,给每个输入框绑定了 onfocusin 和 onfocusout 事件,当输入框获得焦点时,会添加一个名为 "focused" 的类,从而改变其背景颜色;当输入框失去焦点时,会移除该类。

通过这样的示例,我们可以看到 onfocusin 事件的一个实际应用场景,帮助我们实现更加动态和交互性的页面效果。


下一篇:概览