jquery聚焦事件

jQuery 聚焦事件

jQuery 提供了多种方法处理聚焦（focus）事件，主要用于在元素获得焦点时触发相应的操作。以下是几种常见的实现方式：

基本语法

$(selector).focus(function);

selector 是目标元素的选择器，function 是事件触发时执行的回调函数。

示例代码

$("#inputField").focus(function() {
  $(this).css("background-color", "yellow");
});

当 ID 为 inputField 的元素获得焦点时，背景色会变为黄色。

事件委托 对于动态生成的元素，可以使用事件委托：

$(document).on("focus", ".dynamicField", function() {
  alert("动态元素获得焦点");
});

触发聚焦事件 手动触发元素的聚焦事件：

$("#button").click(function() {
  $("#inputField").focus();
});

移除聚焦事件 移除已绑定的聚焦事件处理函数：

$("#inputField").off("focus");

注意事项

• 聚焦事件适用于可交互元素如 input、select、a 等。
• 某些移动端浏览器对 focus 事件的支持可能存在差异，需进行兼容性测试。
• 可结合 blur 事件实现更完整的焦点管理逻辑。

替代方法 jQuery 3.0+ 推荐使用 .on() 方法绑定事件：

$("#inputField").on("focus", function() {
  // 处理逻辑
});

以上方法可根据实际需求选择使用，适用于表单验证、UI 交互增强等场景。