jQuery基礎之四 -- 事件

1.事件綁定
bind(type [, data], fn);
type: focus/blur, focusin/focusout, click/dblclick, load/unload, resize, scroll, mousedown/mouseup, mouseover/mouseout/mousemove,
  mouseenter/mouseleave, change, select, submit, keydown/keypress/keyup, error，也可以綁定自定義事件
data: 可選，作爲event.data屬性值傳遞給事件對象的額外數據對象
fn: 用來綁定的事件處理函數

 one(type [, data], fn); //當處理函數觸發一次後，立即刪除，只會被執行一次

 live(type [,data], fn); //類似於bind，給所有匹配的元素附加一個事件處理函數，即使這個元素是以後再添加進來的也有效。

 die([type] [,eventName]); //類似於unbind，移除所有通過 live() 函數添加的事件處理程序

 delegate(element, type [, data], fn);  //類似於live，向匹配元素的當前或未來的子元素附加一個或多個事件處理器，注意只是添加在element元素裏面的子元素

 undelegate(element);  //類似於die，從匹配元素移除所有由delegate() 添加的事件處理器，現在或將來

$("#panel h5.head").bind("click", function(){
        var $content = $(this).next("div.content");
        if($content.is(":visible"))
            $content.hide();
        else
           $content.show();
   });

綁定多個事件：
$("div").bind("mouseover mouseout", funtion(){ 
   $(this).toggleClass("over");
});

通過傳入一個映射對來一次綁定多個事件處理函數
$('#foo').bind({
  click: function() {
    // do something on click
  },
  mouseenter: function() {
    // do something on mouseenter
  }
});

2.合成事件
hover(enter, leave); 用於模擬光標懸停事件，當光標移動到元素上時，針對觸發指定的第1個函數，移出時觸發第2個函數
//相當於mouseenter和mouseleave
toggle(fn1,fn2...fnN); 用於模擬鼠標連續單擊事件，第1次觸發第1個fn。。。

  //另一個作用： 切換元素的可見狀態

$("#panel h5.head").hover(function(){
   $(this).next("div.content").show();
},function(){
   $(this).next("div.content").hide();
});
等價於：
$("#panel h5.head").mouseover(function(){
   $(this).next("div.content").show();
});
$("#panel h5.head").mouseout(function(){
   $(this).next("div.content").hide();
});

$("#panel h5.head").toggle(function(){  
   $(this).next("div.content").show();
},function(){ 
   $(this).next("div.content").hide();
});
等價於：
$("#panel h5.head").toggle(function(){  
   $(this).next("div.content").toggle(); //切換元素的可見狀態
},function(){ 
   $(this).next("div.content").toggle(); //切換元素的可見狀態
});

3.事件冒泡

eg:單擊裏層的<span>觸發了外層的<div>事件。。。

 停止事件冒泡：

event.stopPropagation();

阻止默認行爲：eg, 單擊超鏈接後會跳轉，單擊提交按鈕後表單會提交

event.preventDefault(); 

//return false; 同時對事件對象停止冒泡和默認行爲

jQuery不支持事件捕獲，如果需要使用事件捕獲，可以直接使用原生的JavaScript。

4.事件對象屬性

event.type;            事件類型，如click、mouseover、blur等
event.preventDefault();  阻止默認行爲 原IE中不支持
event.isPreventDefault(); 返回 event 對象上是否調用了 event.preventDefault()
event.stopPropagation(); 停止事件冒泡 原IE中不支持
event.target;          獲取到觸發事件的元素
event.relatedTarget;   相關元素
event.pageX/enent.pageY;  光標相對於頁面的x座標和y座標，原IE中e.x()/e.y()，Firefox中e.pageX()/e.pageY()
event.which;         鼠標單擊事件中獲取到鼠標的左、中、右鍵，1=左鍵，2=中鍵，3=右鍵
event.metaKey;       鍵盤事件中獲取<ctrl>按鍵
event.originalEvent; 指向原始的事件對象
event.timeStamp      該屬性返回從 1970 年 1 月 1 日到事件發生時的毫秒數
event.result         包含由被指定事件觸發的事件處理器返回的最後一個值
  $("button").click(function(e) {
    return ("最後一次點擊的鼠標位置是： X" +e.pageX + ", Y" + e.pageY);
  });
  $("button").click(function(e) {
    $("p").html(e.result);
  });

5.移除事件

 unbind([type][ , data]); //沒有參數則刪除所有綁定的事件,有第2個參數，則只有這個特定的函數會被刪除

$("#btn").unbind();  //刪除所有事件
$("#btn").unbind("click");  //只刪除click事件
$("#btn").unbind("click", myfun); //刪除指定名稱的click事件，名稱可以這樣指定： $("#btn").bind("click", myfun=function(){...});

6.模擬事件
trigger(type[ ,data]);
triggerHandler(type[ ,data]); //只綁定事件，而不執行瀏覽器默認操作eg：focus事件與焦點問題

$("btn").trigger("click"); 或者 $("btn").click();
$("btn").bind("myClick", function(event,param1,param2,...){ .....自定義事件 });
$("btn").trigger("myClick", ["param1", "param2",...]); 

$("input").trigger("focus"); //不僅觸發focus事件，也會使input元素本身得到焦點（這是瀏覽器的默認操作）
$("input").triggerHandler("focus"); //只觸發綁定的focus事件，不會得到焦點
$("input").select(function(){
    $("input").after("發生 Input select 事件！");
});
$("button").click(function(){
    $("input").triggerHandler("select"); //只會在input元素後面添加"發生 Input select 事件"，而不會全部選中input裏面的元素（沒有執行默認的選中操作）
});

7.事件命名空間

在所綁定的事件後面添加命名空間，這樣在刪除事件時，只需要指定事件命名空間即可

 $("div").bind("dblclick", fn).bind("click.plugin", fn).bind("mouseover.plugin", fn);

 刪除事件可以直接指定命名空間： $("div").unbind(".plugin");  

$("div").trigger("click"); 會觸發click和click.plugin事件
$("div").trigger("click！"); 只觸發click事件，"!"是匹配所有不包含在命名空間中的click方法