jQuery之事件模型(用法)
时间:2011-06-03 来源:chenmouren
[转] 这是转的,别人总结的。抄在这里忘记可以来查。api长时间不用就会忘记。
1.绑定事件
$("p").bind("click", function(e){})
$("p").click(function() {})
2.删除事件
(1) 删除特定事件
$("div").unbind("click");
(2)删除所有事件
$("div").unbind();
3.触发事件
(1)trigger方法
触发特定元素事件
$("div").trigger('click');
(2)triggerHandler方法
与trigger方法相似,但不触发浏览器默认事件,如focus事件,使用此方法,将会阻止焦点到元素上
$("input").triggerHandler("focus");
4.特殊事件
(1)one(string event,function data)
此事件只执行一次则被删除
$("p").one("click", function(){
alert("test");
});
(2)hover(over, out)
切换mouseover与mouseout事件
$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
可用unbind mouseover与mouseout方法来删除此事件
(3)toggle(oldclick,newclick)
切换执行click事件
$("li").toggle(
function () {
$(this).css("list-style-type", "disc")
.css("color", "blue");
},
function () {
$(this).css({"list-style-type":"", "color":""});
}
);
可用unbind click方法来删除此事件
5.事件命名空间(便于管理)
实际使用方面:
(1)当不需要全部事件,删除特定2个以上的事件.
示例:
$("div").bind("click.plugin",function() {} );
$("div").bind("mouseover.plugin", function(){});
$("div").bind("dblclick", function(){});
$("button").click(function() {$("div").unbind(".plugin"); })
在事件名称后面加命名空间,在删除事件时,只需要指定命名空间即可.以上代码执行以后,dbclick仍然存在.
(2)相同事件名称,不同命名的事件执行方法
示例:
$("div").bind("click", function(){ alert("hello"); });
$("div").bind("click.plugin", function(){ alert("goodbye"); });
$("div").trigger("click!"); // alert("hello") only
以上trigger方法则根据事件名称来执行事件.