[JQuery]jQuery事件总结

转载:http://www.cnblogs.com/Clingingboy/archive/2008/02/14/1068908.html
    很少写这些,看了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方法则根据事件名称来执行事件.
简单的写几句.以上的几个方法还是非常实用方便的

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏