（4）事件处理——（10）事件处理上下文（Event handler context）

Our switcher is behaving correctly, but we are not giving the user any feedback about which button is currently active. Our approach for handling this will be to apply the selectedclass to the button when it is clicked, and remove this class from the other buttons. The selectedclass simply makes the button's text bold:

.selected {font-weight: bold;}

我们的切换器表现的很好，但是我们没有给用户任何关于哪一个按钮目前是激活的反馈。我们解决这件事的方法是当按钮被点击后，为按钮添加一个selected类，然后移除其他按钮上的这个类。selected类可以让按钮的文字变粗：

.selected {font-weight: bold;}

We could accomplish the preceding class modification by referring to each button by ID and applying or removing classes as necessary, but instead we'll explore a more elegant and scalable solution that exploits the contextin which event handlers run.

我们可以通过ID引用到每一个按钮，然后实现对之前的类的修改，必要时可以修改其他类和移除类，但是我们将探索一种更加强大和可扩展的解决方案——采用事件处理器的上下文。
When any event handler is triggered, the keyword thisrefers to the DOM element to which the behavior was attached. Earlier we noted that the $()function could take a DOM element as its argument; this is one of the key reasons that facility is available. By writing $(this)within the event handler, we create a jQuery object corresponding to the element, and can act on it just as if we had located it with a CSS selector.

当事件处理器被触发以后，关键词this会指向行为被附加的DOM元素。之前，我们说过，$()可以使用DOM元素作为他的参数，这就是这种能力可以使用的关键因素之一。通过在事件处理器中书写$(this)，我们创建了一个相应的jquery对象，然后可以像我们使用css选择器定位了他一样来在上面添加行为。

With this in mind, we can write the following code snippet:

$(this).addClass('selected');

Placing this line in each of the three handlers will add the class when a button is clicked. To remove the class from the other buttons, we can take advantage of jQuery's implicit iteration feature, and write the following code snippet:

$('#switcher button').removeClass('selected');

This line removes the class from every button inside the style switcher.

在知道这一点以后，我们可以写出下面这样的代码片段：

$(this).addClass('selected');

把这行代码放在这三个处理器的每一个中，将会在按钮被点击以后添加上这个类。为了移除其他按钮的这个类，我们可以借助jquery的隐式迭代的特点，写下下面这样的代码段：

$('#switcher button').removeClass('selected');

这行将会移除风格切换器内部的每一个按钮的类。

We should also add the class to the Defaultbutton when the document is ready. So, placing these in the correct order, we have the following code snippet:

$(document).ready(function() {
$('#switcher-default')
.addClass('selected')
.bind('click', function() {
$('body').removeClass('narrow');
$('body').removeClass('large');
$('#switcher button').removeClass('selected');
$(this).addClass('selected');
});
$('#switcher-narrow').bind('click', function() {
$('body').addClass('narrow');
$('body').removeClass('large');
$('#switcher button').removeClass('selected');
$(this).addClass('selected');
});
$('#switcher-large').bind('click', function() {
$('body').removeClass('narrow');
$('body').addClass('large');
$('#switcher button').removeClass('selected');
$(this).addClass('selected');
});
});

我们也可以在文档模型可以使用的时候为默认按钮添加这个类。因此，将这些代码以正确的顺序排列，我们将有下面的代码片段：

同上，代码片段。

Now the style switcher gives appropriate feedback.

现在风格切换器有了正确的反馈。

Generalizing the statements by using the handler context allows us to be yet more efficient. We can factor the highlighting routine out into a separate handler, as shown in Listing 3.4, because it is the same for all three buttons:

$(document).ready(function() {
$('#switcher-default')
.addClass('selected')
.bind('click', function() {
$('body').removeClass('narrow').removeClass('large');
});
$('#switcher-narrow').bind('click', function() {
$('body').addClass('narrow').removeClass('large');
});
$('#switcher-large').bind('click', function() {
$('body').removeClass('narrow').addClass('large');
});
$('#switcher button').bind('click', function() {
$('#switcher button').removeClass('selected');
$(this).addClass('selected');
});
});

通过使用事件处理上下文来实现语句，让我们变的更加高效。我们可以吧高亮的功能拆分到不同的处理器中，正如在li s t3.4中展示的那样。因为这对所有的三个按钮来说是相同的。

代码同上。

This optimization takes advantage of three jQuery features we have discussed. First, implicit iterationis, once again, useful when we bind the same clickhandler to each button with a single call to .bind(). Second, behavior queuingallows us to bind two functions to the same click event, without the second overwriting the first. Lastly, we're using jQuery's chainingcapabilities to collapse the adding and removing of classes into a single line of code each time.

这种优化方法使用了我们讨论过的三个jquery特点的优势。首先，在一次，我们使用隐式继承，当我们单单调用.bind()来为每一个按钮绑定click事件的时候，这是很有用的。第二，行为序列按我们在同一个点击事件上绑定了两个函数，而不会担心第二个函数会吧第一个覆盖。最后，我们使用了jquery的链式能力，在一行代码中用简练的代码实现了添加和移除类。