jQuery 事件处理 2

在 jQuery 中,事件处理函数接受的是一个事件对象,这个事件对象中包含有很多属性和方法。事件对象通常会使用 preventDefault 方法阻止默认的事件执行。当然,事件对象中还有其它很多有用的属性和方法:

pageX, pageY 事件触发时鼠标的坐标位置,左上角坐标为 (0, 0)。

type 事件的类型(如:“click”)。

which 被按下的按钮,或者键盘上的按键。

data 绑定事件时传入的数据。

target 初始化事件的 DOM 元素。

preventDefault() 阻止事件默认动作的执行(例如点击一个超链接时,阻止页面跳转)。

stopPropagation() 取消事件冒泡

在事件处理函数中,可以使用 this 来访问被绑定事件的元素,要把将该元素转换成 jQuery 对象,使用 $(this) 即可:

var $this = $(this);

当超链接被点击时,阻止默认的页面跳转事件:

$('a').click(function(e) {
    var $this = $(this);
    if ($this.attr('href').match('evil')) {
        e.preventDefault();
        $this.addClass('evil');
    }
});

jQuery 中提供了 $.fn.trigger 方法,可以在用户没有执行任何动作的时候触发事件:

var foo = function(e) {
    if (e) {
        console.log(e);
    } else {
        console.log('this didn\'t come from an event!');
    }
};


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

foo();                   // 方法一

$('p').trigger('click'); // 方法二,跟方法一的结果不一样

via http://jqfundamentals.com

Posted on 2012-03-07

No Comments

Leave a Comment