事件（二）——Jquery事件模型

最新推荐文章于 2024-11-08 14:35:14 发布

iteye_3753

最新推荐文章于 2024-11-08 14:35:14 发布

阅读量85

点赞数

文章标签： javascript ViewUI

bind()方法

与W3C标准事件API十分相似，除了名称上的不同以外，唯一差别就是去掉了useCapture参数，并且去掉了事件名称中的on前缀。示例代码如下：

$(document).bind(

"ready",

function() {

$("div").bind(

"mouseover",

function() {

$(this).addClass("tmpExampleOver");

}

);

$("div").bind(

"mouseout",

function() {

$(this).removeClass("tmpExampleOver");

}

);

}

);

使用单独的事件方法绑定事件

与传统的时间模型不同，Jquery的事件名称没有on前缀，而且可以将多个相同类型的时间挂钩到同一个元素上。示例代码如下：

$(document).ready(

function() {

$("div").mouseover(

function() {

$(this).addClass("tmpExampleOver");

}

);

$("div").mouseout(

function() {

$(this).removeClass("tmpExampleOver");

}

);

}

);

还有一些常用的事件挂钩模式，如hover()方法同时挂钩一个mouseover和mouseout事件，toggle()方法可以挂钩多个事件处理函数，以便交替在不同函数间处理事件。

触发事件

使用Jquery的事件API可以将事件处理函数绑定要事件，实际上这些函数可以不依赖任何实际事件的发生而单独触发。从而允许你重用绑定的事件函数来实现其他功能。Jquery甚至还允许将参数传递给事件处理函数。示例程序演示trigger()方法：

$(document).ready(

function() {

$("input").focus(

function() {

$(this).addClass("tmpFocused");

}

);

$("input").blur(

function() {

$(this).removeClass("focus");

}

);

$("input").trigger("focus");

}

);