jQuery 事件綁定方法(bind hover toggle live.... )、刪除事件方法(unbind, die)及 事件對象


事件綁定方法:

1.<type>(function)

$("button").click(function(){
    ...
});

2.bind(map)

$("input[type='text']").bind({
    focus: function(){
        ...
    },
    blur: function(){
        ...
    }
})

3.bind(type, [data,] function)

  注:如果沒有第二個參數,則與第一個綁定事件方法相同

$("button").bind(
    "click",
    {
         arg1: "2012"
         arg2: "07"
    },
    function(event){
        ...
        event.data.arg1
        ...
    }
)

4.one(type, [data,] function)

  綁定事件只執行一次,執行完之后綁定失效

5.hover(over, out)

  注:兩個參數為鼠標盤旋在對象上方和離開時調用的函數

$("div").hover(
    function(){
        ...
    },
    function(){
        ...
    }
)

6.toogle(function1, function2, ...)

  該方法作用是單擊對象時循環調用函數列表中的函數

7.live(type, function)

  該方法為整個頁面生命周期內的某一類對象綁定一個事件處理程序

 

事件刪除方法:

1.unbind([type] [,data])

  該方法刪除匹配對象的事件處理程序,與bind方法對應,可以刪除所有以bind方式綁定的自定義事件處理程序。如果所有參數都省略,將刪除匹配對象的所有事件及事件處理程序;如果只有第一個type參數,將刪除指定事件類型的時間處理程序。如:

$("#btn").unbind("click");

  如果同時指定兩個參數,將刪除指定事件類型的指定事件處理程序。如,btn綁定以下函數:

  var btnClick = function(){...};

  則刪除btn的該事件處理程序的代碼為:

$("#btn").unbind("click", btnClick);

2.die([tyoe] [,function])
  該方法與live方法對應,用於解除live注冊的自定義事件。參數與unbind方法類似。

 

模擬操作:

  模擬操作就是模擬用戶觸發相應的事件,如一個事件觸發另一個事件。

1.<type>()

  如觸發一個按鈕的單擊事件:

$("button").click();

2.trigger(type [,data])

  如觸發一個按鈕的單擊事件:

$("button").trigger("click");

3.triggerHandler(type [,data])

  與 trigger 方法不同:

  該方法只觸發對象集合中的第一個元素的事件處理程序。且返回的是事件處理程序的返回值,而不是可鏈接的jQuery對象。該方法不會觸發事件冒泡

 

jQuery事件對象:

1.事件對象的屬性

  type:獲得該對象的事件類型,如click, focus, mouseover等

  target:獲得事件觸發者(DOM對象)

  data:獲得調用事件時傳入的額外參數集合

  relatedTarget:獲得觸發鼠標事件的DOM元素

  currentTarget:獲得當前DOM元素(等同於this關鍵字)

  pageX/pageY:獲得鼠標事件中,鼠標光標相對於頁面左上角的位置

  result:獲得上一個事件處理函數返回的值

  timeStamp:獲得事件發生的時間戳

2.事件對象的方法

函數名

說明 例子
preventDefault() 取消元素事件的默認動作
例如:
對於超級鏈接a來說,有href屬性,那么在點擊a的時候就會導航至href所指向位置.我們在a的click事件中,調用本方法,就不會導航到指定位置
//取消事件默認動作 $("a").bind("click", function (e) {
    e.preventDefault(); 
});
isDefaultPrevented() 是否調用過preventDefault()方法
e.isDefaultPrevented()
stopPropagation() 取消事件冒泡
e.stopPropgation();
isPropagationStopped() 是否調用過stopPropagation()方法
e.isPropagationStopped()
stopImmediatePropagation() 取消執行該元素該事件處理函數的后續事件處理函數,
並取消事件冒泡
$("a").bind("click", function (e) {
    e.stopImmediatePropagation();
});

//不會被執行到 $("a").click(function () {
    alert("我被點擊了");
});
isImmediatePropagationStopped() 是否調用過stopImmediatePropagation()方法
$("a").bind("click", function (e) {
    e.stopImmediatePropagation();
    alert(e.isImmediatePropagationStopped());
});

例如:要在鼠標移動時獲取鼠標的位置:

$(document).mouseover(function(event){
    var msg = event.pageX + " " + event.pageY;
    alert(msg);
});

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM