当jQuery1.7遇上focus方法的问题

当jQuery1.7遇上focus方法的问题是一个经典的坑点，解决方案需要对事件绑定和事件委托有一定的理解。以下是具体攻略：

问题描述

在 jQuery 1.7 及之前版本，使用 focus() 方法绑定的事件会在元素失去焦点后立刻触发，而在 1.8 版本开始，该方法仅会在元素获得焦点时才触发，这导致了代码兼容性问题。

解决方案

方法一：使用其他绑定方法

在 jQuery 1.7 及之前版本中，我们可以使用 bind() 方法绑定 focus 事件：

$(selector).bind("focus", function(){
    //do something when focus event triggered
});

然而，bind() 已经在 jQuery 3.0 版本中被废弃，建议使用 on() 方法代替。

$(selector).on("focus", function(){
    //do something when focus event triggered
});

在此方式下，不仅能够兼容jQuery1.7以及之前版本，也能兼容到jQuery3.0的新版本。

方法二：事件委托

当然，我们还可以使用事件委托的方式来解决这个问题。利用事件冒泡原理和 jQuery 提供的on()方法，我们可以在页面上最顶层的父元素上绑定事件，然后判断触发事件的元素是否符合条件：

$(document).on("focus", selector, function(){
    //do something when focus event triggered
});

或者，指定父级元素，比如：

$("#parent").on("focus", selector, function(){
   //do something when focus event triggered
});

以上两种方式，前者是在整个文档对象上委托事件，后者是针对指定元素进行委托，委托范围通常是父级元素，这可大大减少事件绑定操作次数，优化代码性能。

示例说明

下面的示例都是针对keyup事件进行绑定操作：

//jQuery1.7之前版本的做法
$(selector).keyup(function(){
   //do something when keypress event triggered
});

//jQuery1.7及之后版本的做法
$(selector).on("keyup", function(){
   //do something when keypress event triggered
});

//用事件委托绑定keyup事件
$(document).on("keyup", selector, function(){
   //do something when keypress event triggered
});

//用事件委托绑定keyup事件，针对指定的父元素
$("#parent").on("keyup", selector, function(){
   //do something when keypress event triggered
});

以上示例中，selector是用于选择要绑定事件的元素的选择器。