jQuery事件总结_H5之家 - 中国HTML5教程资源分享第一站

jQuery事件总结

岁数大了，QQ也不闪了，微信也不响了，电话也不来了，但是图老师依旧坚持为大家推荐最精彩的内容，下面为大家精心准备的jQuery事件总结，希望大家看完后能赶快学习起来。

很少写这些,看了1.2.3版本的改进,确实佩服,很方便.

1.绑定事件
(1)
("p").bind("click", function(e){});
(2)
("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.3版本新增功能
(1)事件命名空间(便于管理)

实际使用方面:
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方法则根据事件名称来执行事件.

简单的写几句.以上的几个方法还是非常实用方便的

微信公众号搜索“图老师”或者“tulaoshi_com”加关注，每天最新的美食、健康、育儿、美妆、美容、手工DIY等教程让你一手全掌握。推荐关注！【微信扫描下图可直接关注】

图老师微信.jpg