learning jquery 第三章 part4.txt

jQuery教程,不错jQuery教程,不错jQuery教程,不错jQuery教程,不错

默认动作

我们是在一个链接上而不是一个普通的 <div> 上注册单击事件句柄，我们会面对另一个问题。当用户单击一个链接，浏览器加载一个新页面。这个行为不是一个与我们正在讨论有相同意义的事件句柄，反而，这是单击链接元素的默认动作。相似地，用户正在编辑表单时按下 Enter 键，触发了表单的提交事件，但其实表单的提交发生在这个之后。

如果这些默认的动作不是你想要的，在事件上调用 .stopPropagation() 不会有帮助。这些动作在普通的事件传播流中无处都发生。反而，.preventDefault() 方法会在触发默认动作之前在事件的轨迹中停止它。

注意：我们在事件环境中做一些测试时，调用 .preventDefault() 往往很有用的。例如，在一个表单提交过程中，我们可能想检查必须要填写的字段，并且只要他们不是就阻止默认动作。我们将会有第八章了解这些内容。

事件传播和默认动作是独立的机制。当其中一个发生时另一个会被阻止。如果想两个都停止，我们可以从事件句柄中返回 false，这是在事件上调用 .stopPropagation() 和 .preventDefault() 的一个捷径。


删除事件句柄

有时我们会处理之前注册的事件句柄。或许页面的状态已经改变了，那么动作就不再有意义了。在事件句柄内使用条件语句来处理这种情况通常是可能的，但删除整个句柄可能会更优雅。

假设只要页面不使用 normal 样式我们想折叠样式选择器保持展开状态，当有样式选择器被单击时，可以通过调用 .unbind() 方法来删除句柄来完成。首先，我们给予函数一个名字以便可以重复使用它。

$(document).ready(function() { 

var toggleStyleSwitcher = function() { 

$('#switcher .button').toggleClass('hidden'); 

}; 

$('#switcher').click(toggleStyleSwitcher);

});

注意，我们正在用另一种方法来定义一个函数，而不是 function 关键字来定义。我们给本地变量分配了一个匿名创建函数。这是为使事件句柄和其它函数定义互相组合得更紧密的一个风格的选择。这两种方法功能是一样的。

既然函数有名字，当必要时我们可以作为一个句柄来删除它。

$(document).ready(function() { 

var toggleStyleSwitcher = function() { 

$('#switcher .button').toggleClass('hidden'); 

}; 

$('#switcher').click(toggleStyleSwitcher); 

$('#switcher-narrow, #switcher-large').click(function() { 

$('#switcher').unbind('click', toggleStyleSwitcher); 

});

});

这里的 .unbind() 方法把一个事件类型作为它的第一个参数，要删除的函数作为第二个参数。这里我们已忽略有相同结果的函数，删除所有已经注册事件的句柄是 .unbind() 的一个默认的行为。然而，更明确的是更安全的，因为使用用其它可能想绑定元素的代码时我们不必害怕冲突。

现在单击每个按钮后，代码阻止折叠功能。然而，当样式设置回 normal 时，在适当位置我们没有代码存储行为，为了做这事我们给 Normal 按钮加上了另一个行为。

$(document).ready(function() { 

var toggleStyleSwitcher = function() { 

$('#switcher .button').toggleClass('hidden'); 

}; 

$('#switcher').click(toggleStyleSwitcher); 

$('#switcher-normal').click(function() { 

$('#switcher').click(toggleStyleSwitcher); 

}); 

$('#switcher-narrow, #switcher-large').click(function() { 

$('#switcher').unbind('click', toggleStyleSwitcher); 

});

});

现在当文档加载时就绑定 toggle 行为，单击 Narrow Column 或者 Large Print 没有绑定，之后单击 Normal 又重新绑定。

这里我们已经回避了一个潜在的缺陷。记得当在 jQuery 中给事件绑定一句柄时，前一个句柄仍然有效了。这意味着如果在一行单击 Normal 两次，会触发两次 toggle 行为。的确，如果我们在例子中已使用匿名函数，就会出现这种情况。但既然我们给了函数一个名字并在代码中到处使用相同的函数，行为只绑定一次。如果 .bind() 函数已经附加了事件句柄，那它不会再附加。

在 jQuery 1.0，使用速记事件方法解开事件句柄绑定是可能的，只是像他们的绑定副本。例如，.unclick() 和 unbind(‘click’) 是同义词，这个工具很少使用，所以为了防止库变大和 API 的变复杂，1.1版本就删除这个速记事件方法。

注意：再提一下，删除速记事件方法是很简单的，我们将在第十章中讨论如何完成这些，并作为如何扩展 jQuery 功能的一个例子。

为第一次事件句柄触发后我们想马上解开它的绑定这种情况，一个捷径是有效的。这个捷径称为 .one()，用法像这样：

$(document).ready(function() { 

$('#switcher').one('click', toggleStyleSwitcher);

});

这将导致 toggle动作只发生一次，没有第二次。

模拟用户交互

有时，即使正常环境下事件没有发生，但绑定一个事件是很方便执行代码的。例如，假设我们想一开始样式选择器是处于展开状态的。我们可以通过在样式表里隐藏按钮，或者通过在 $(document).ready() 句柄中调用 .hide() 方法来完成。另一种方法是在样式选择器上模仿单击以便触发已创建的 toggle 机制。

.trigger() 方法让我们只做这些：

$(document).ready(function() { 

$('#switcher').trigger('click');

});

当页面加载时，即使已经单击交换器，它也会马上折叠，截图如下：





注意：当这种用 jQuery 方法来触发事件，事件传播是不会发生的，只有直接附加给元素的句柄才能被执行。如果我们想正确操作，必须在 $('#switcher') 和 not $('#switcher h3') 上触发，因为那是行为已经附加的地方。

.trigger() 方法提供与 .bind() 相同的捷径。当这些捷径没有使用参数，行为将是触发动作而不是绑定它。

小结

本章中讨论过的功能让我们：

1)        使用 .bind() 或 .click() 来响应页面元素上的用户单击和改变页面使用的样式。

2)        甚至当句柄绑定到几个元素时，用事件上下文来执行依赖页面元素单击的不同的动作。

3)        使用 .toggle() 交替地展开与折叠页面元素。

4)        使用 .hover() 在鼠标指针下高亮页面元素。

5)        元素使用 .stopPropagation() 和 preventDefault() 响应事件的影响。

6)        调用 .unbind() 以删除正在使用的事件句柄。

7)        用 .trigger() 来激发事件句柄绑定。

放到一起，我们可用这此功能来建立交互性强的页面。在下一章中，我们将学习在这些交互过程中如何给用户提供可视的反馈。