首页 | 新闻 | 交流 | 问吧 | 文档 | 手册 | 下载 | 博客

jQuery之事件模型(用法)

作者:  时间: 2011-06-03

[转]  这是转的,别人总结的。抄在这里忘记可以来查。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方法则根据事件名称来执行事件.