为元素绑定事件Connecting Events to Elements

为元素绑定事件Connecting Events to Elements
Prev	Chapter 5. 事件	Next

为元素绑定事件Connecting Events to Elements

jQuery为常用的事件提供了简便的绑定方法，这些方法是日后最常用的方法。这些方法是jQuery的$.fn.bind方法的简便缩写，例如$.fn.click、$.fn.focus、$.fn.blur、$.fn.change等。 bind这个方法一般用于绑定相同的事件处理函数到多个事件，也用于为事件处理函数提供数据，或者在使用自定义事件时使用。

Example 5.1. 使用便捷的方式绑定

$('p').click(function() {
    console.log('click');
});

Example 5.2. 使用$.fn.bind方法绑定事件

$('p').bind('click', function() {
    console.log('click');
});

Example 5.3. 使用$.fn.bind方法将数据绑定到事件

$('input').bind(
    'click change',  // 绑定到多个事件
    { foo : 'bar' }, // 传递数据

    function(eventObject) {
        console.log(eventObject.type, eventObject.data);
        // 输出事件类型和{ foo : 'bar' } logs event type, then { foo : 'bar' }
    }
);

绑定事件到只执行一次

有时候你需要一个只执行一次的特殊处理函数，或者不希望有处理函数运行，或者需要运行另一个不同的处理函数。 jQuery为此提供了$.fn.one方法。

Example 5.4. 使用$.fn.one方法转换处理函数

$('p').one('click', function() {
    console.log('You just clicked this for the first time!');
    $(this).click(function() { console.log('You have clicked this before!'); });
});

如果你想只在某个元素第一次被点击的时候而不是之后的每次都做一些复杂的初始化， $.fn.one方法是很好的选择。

取消事件绑定

你可以使用$.fn.unbind方法，通过传递事件类型为参数的方式取消事件处理函数的绑定。如果你在事件中附加了已命名的函数，你可以通过将这个命名函数作为第二个参数传到 $.fn.unbind方法中来单独取消绑定。

Example 5.5. 取消选择器下所有的点击事件处理函数绑定

$('p').unbind('click');

Example 5.6. 取消特定点击事件处理函数绑定

var foo = function() { console.log('foo'); };
var bar = function() { console.log('bar'); };

$('p').bind('click', foo).bind('click', bar);
$('p').unbind('click', bar); // foo依然被绑定到点击事件

命名空间事件

由于复杂的应用和插件的共享，为了防止无意中取消了你不知道或者无从知道的事件的绑定，为事件添加命名空间是很必要。

Example 5.7. 命名空间事件 Namespacing events

$('p').bind('click.myNamespace', function() { /* ... */ });
$('p').unbind('click.myNamespace');
$('p').unbind('.myNamespace'); // 取消这个命名空间中所有事件的绑定

Prev	Up	Next
Chapter 5. 事件	Home	在事件处理函数中的函数 Inside the Event Handling Function