jQuery 之事件处理

jQuery 可以很简单的为元素绑定事件。当事件被触发时,相关的函数就会被执行。函数内的 this 指向被触发事件的元素。

常用事件方法有 $.fn.click$.fn.focus$.fn.blur$.fn.change 等等,他们都是 $.fn.bind 方法的简写方式。bind 方法在为元素一次性绑定多个事件时非常方便:

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

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


$('input').bind(
    'click change',  // 一次性绑定多个事件上去
    { foo : 'bar' }, // 还能传递数据进去

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

某些情况下,如果希望事件只能执行一次,可以使用 $.fn.one 方法:

$('p').one('click', function() {
    console.log('第一次点击!');
    $(this).click(function() { console.log('你之前不是点过了吗?'); });
});

如果想取消元素上绑定的时间,要用 $.fn.unbind 方法。如果绑定事件的时候传入的是一个已命名函数,那么也可以单独接触这个函数:

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

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

$('p').bind('click', foo).bind('click', bar);
$('p').unbind('click', bar); // foo 仍然被绑定在 click 事件上

对于复杂的应用,为事件设置命名空间是必要的:

$('p').bind('click.myNamespace', function() { /* ... */ });
$('p').unbind('click.myNamespace');
$('p').unbind('.myNamespace'); // 解除绑定相应命名空间下的所有事件

如果一个元素上需要绑定多个事件,并且每个事件有各自不同的处理函数:

$('p').bind({
	'click': function() { console.log('clicked!'); },
	'mouseover': function() { console.log('hovered!'); }
});

via http://jqfundamentals.com/

Posted on 2012-03-06

No Comments

Leave a Comment