To illustrate some event handling techniques, suppose we wish to have a single page rendered in several different styles based on user input. We will allow the user to click buttons to toggle between a normal view, a view in which the text is constrained to a narrow column, and a view with large print for the content area.
为了研究一些事件处理技术，假定我们希望让一个网页由用户输入的来决定不同的渲染样式。我们将让用户点击按钮来让网页在三个样式中切换：一个正常视图，一个文本的行间距变窄的视图，一个文本区域是大号字体的视图。
渐进增强
Progressive enhancement
In a real-world example, a good web citizen will employ the principle of progressive enhancementhere. The style switcher should either be hidden when JavaScript is unavailable or, better yet, should still function through links to alternative versions of the page. For the purposes of this tutorial, we'll assume that all users have JavaScript turned on.
渐进增强
在真实世界中，一个好的we b开发者将使用渐进增强的原则。在js不可用的时候风格切换器应该被隐藏，或者仍然可以通过链接到不同版本的网页来生效。为了这个教学的目的，我们假定所有用户的js功能都被开启了。
The HTML markup for the style switcher is as follows:
<div id="switcher" class="switcher"> <h3>Style Switcher</h3> <button id="switcher-default"> Default </button> <button id="switcher-narrow"> Narrow Column </button> <button id="switcher-large"> Large Print </button> </div>
样式切换器的html标记如下：
<div id="switcher" class="switcher"> <h3>Style Switcher</h3> <button id="switcher-default"> Default </button> <button id="switcher-narrow"> Narrow Column </button> <button id="switcher-large"> Large Print </button> </div>Combined with the rest of the page's HTML markup and some basic CSS, we get a page that looks like the following screenshot:
将剩下网页的html标记和一些基本的css连接起来，我们将得到看起来像下面这样的网页：
To begin, we'll make the Large Printbutton operate. We need a bit of CSS to implement our alternative view of the page, as shown in the following code snippet:
body.large .chapter {
font-size: 1.5em;
}
开始，我们先让大号字体的按钮可用。我们需要一些css去实现我们的可选的网页视图，就像下面到代码片段一样：
body.large .chapter {
font-size: 1.5em;
}
Our goal, then, is to apply the largeclass to the <body>tag. This will allow the stylesheet to reformat the page appropriately. Using what we learned in Chapter 2, Selecting Elements, the following is the statement needed to accomplish this:
$('body').addClass('large');
$('body').addClass('large');
我们的目标是将large类添加到body标签上。这将会让样式表重新恰当的让网页重新格式化。使用我们在第二章选择元素中学到的，我们需要下面的表达式来实现这个目标：$('body').addClass('large');
However, we want this to occur when the button is clicked, not when the page is loaded as we have seen so far. To do this, we'll introduce the .bind()method. This method allows us to specify any DOM event, and to attach a behavior to it. In this case, the event is called click, and the behavior is a function consisting of our preceding one-liner:
$(document).ready(function() {
$('#switcher-large').bind('click', function() {
$('body').addClass('large');
});
});
然而，我们想要这个在按钮被点击的时候发生，而不是像我们现在看到的那样在网页被加载的时候发生。为了做到这点，我们引入了.bind()函数。这个方法允许我们特殊化DOM事件，然后在上面绑定行为。在这种场景下，事件应该是click，行为应该是由我们之前的一行代码组成的函数：$(document).ready(function() {
$('#switcher-large').bind('click', function() {
$('body').addClass('large');
});
});
Now when the button gets clicked, our code runs, and the text is enlarged, as shown in the following screenshot:
现在，当按钮被点击的时候，我们的代码将会运行，文字将会变大，正如下 main的截图展示的那样：
That's all there is to binding a behavior to an event. The advantages we discussed with the .ready()method apply here, as well. Multiple calls to .bind()coexist nicely, appending additional behaviors to the same event as necessary.
This is not necessarily the most elegant or efficient way to accomplish this task. As we proceed through this chapter, we will extend and refine this code into something we can be proud of.
This is not necessarily the most elegant or efficient way to accomplish this task. As we proceed through this chapter, we will extend and refine this code into something we can be proud of.
这就是为事件绑定行为的所有内容。我们讨论.ready()方法的优点在这里也适用。如果需要追加新的行为到相同的事件时，多次调用.bind()函数也可以和平相处。
这并不是实现这一目标的最优雅或者最有效的方法。在我们进行整章的时候，我们将扩展改善我们的代码，让他成为我们骄傲的存在。