事件（Event）

文檔事件

文檔的載入事件

ready(fn)

$(document).ready(function?()?{

});

//或
$(function?()?{
});

//或
$(document).ready(fn)
function?fn()?{?}

//或
$(document).ready(fn?=?function?()?{
});

文檔的鍵盤鼠標事件

keyup(fn)

鍵盤按下并抬起時發生

$(document).keydown(function?()?{
????alert('鍵盤被按下');
});

?

為文檔元素綁定事件

bind(eventName,data,?fn)
//eventName：事件名稱
//data：可選，傳遞到函數的額外數據
//fn：事件處理函數
//eventName可能的值：
//load、unload、
//blur、focus、
//resize、scroll、
//mouseouser、mousemove、
//mouseup、mousedown、
//mouseout、mouseenter、mouseleave、
//click、dbclick、
//change（下拉框選項改變時會發生這個改變事件）、select（文本框被選擇后會發生這個選擇事件）、
//submit、keydown、keyup、keypress
//error

示例

$(document).ready(function?()?{
????var?div?=?$("#box");
????div.bind("click",?fn);
????function?fn()?{
????????alert(event.srcElement.outerText);//print?hello
????????alert(this.id);//print?box
????}
});

//或將type作為函數調用
$('p').click(function?()?{?});
$('p').blur(function?()?{?});

追加事件

使用.操作符可以為該對象追加事件

//鏈式調用
$('li?p').bind('click',?fn1).bind('click',?fn2);
//或
$('li?p').bind(
????{
????????"click":?function?()?{?},
????????"mouseup":?function?()?{?}
????}
);

注銷事件

unbind(eventName?|?fnName)
//eventName：事件名，每個事件名以空格隔開
//fnName：自定義事件的函數名，每個事件名以空格隔開
//注銷事件，如果兩個參數都不存在，則移除所有事件

模擬事件

trigger(event?|?fnName,?paramsArray)
//eventName：事件名，
//fnName：自定義事件的函數名
//paramsArray：事件處理函數所需要的參數?
//注意：當trigger執行submit事件時，瀏覽器也將觸發submit事件
?//這會造成不想要的結果。此時可以使用triggerHandler方法避免瀏覽器的默認動作或使用事件對象的preventDefault或直接在事件處理函數中return?false

示例

//模擬：通過執行代碼來模擬用戶的一個觸發事件的動作
$('p').bind('click',?function?()?{?});????????
$('p').trigger('click');?
//或
$('p').click();

切換事件

toggle(clickX,?clickY,?……)
//為元素綁定多個click事件，奇數次時執行clickX，偶數次時執行clickY

toggle(speed,?callback……)
//speed：顯示或隱藏的動畫速度
//callback：完成動畫后的回調?
//切換元素的顯示/隱藏

hover(clickX,?clickY,?……)
//為元素綁定多個hover事件，奇數次時執行clickX，偶數次時執行clickY

event事件對象

每個事件處理函數中都維護了一個event對象，可以在函數內部獲取它，以便取出事件的信息

$('#box').bind('myshow',?function?(e)?{
????eventMessage?=?e.type;//獲取事件類型名稱
});

event對象的屬性/方法

type
//獲取事件處理函數的名稱，諸如click、mouseover、keydown

relatedTarget
//如果是mouseover事件，獲取鼠標是從哪個dom元素里移動過來的
//如果是mouseout事件，獲取鼠標移動到了哪個dom元素里

pageX
//獲取事件發生時鼠標離客戶區的左邊距

pageY
//獲取事件發生時鼠標離客戶區的左邊距

which
//獲取事件發生時鼠標按下的是左、中、右鍵中的哪個鍵，對應的值是1、2、3
//或鍵盤按下的是哪個鍵

target
//獲取觸發事件的dom源對象

originalEvent
//獲取事件原始對象，主要用于當鼠標類事件發生時
//有效傳遞了一個MouseEvent對象，MouseEvent派生自event的構造器
//如果MouseEvent不滿足你要獲取的事件信息，你可以通過此方法獲取真正的源

mataKey
//是否按下了ctrl鍵

stopPropagation()
//阻止事件冒泡

preventDefault()
//阻止瀏覽器默認動作

事件命名空間

如果為元素綁定了N個事件，注銷時你得一個一個注銷，使用事件命名空間就可以一次性注銷它們。

$('p').bind('mouseover.Result',?function?()?{?});
$('p').bind('click.Result',?function?()?{?});
$('p').bind('focus.Result',?function?()?{?});
$('p').unbind('.Result');
$('p').bind('click',?function?()?{?alert("1");?});?//無命名空間???????
$('p').bind('click.Result',?function?()?{?alert("2");?});?//有命名空間

$('#btn').click(function?()?{
????$('p').trigger('click!')//執行所有不包含在任何命名空間里的click事件，print?1
});

　　

Javascript - 學習總目錄

轉載于:https://www.cnblogs.com/myrocknroll/p/6944854.html

總結

以上是生活随笔為你收集整理的Javascript - Jquery - 事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。