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); });