jQuery事件總結

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方法則根據事件名稱來執行事件. 簡單的寫幾句.以上的幾個方法仍是很是實用方便的