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)
注:如果沒有第二個(gè)參數(shù),則與第一個(gè)綁定事件方法相同
$("button").bind("click",{arg1: "2012"arg2: "07"},function(event){...event.data.arg1...} )4.one(type, [data,] function)
綁定事件只執(zhí)行一次,執(zhí)行完之后綁定失效
5.hover(over, out)
注:兩個(gè)參數(shù)為鼠標(biāo)盤旋在對象上方和離開時(shí)調(diào)用的函數(shù)
$("div").hover(function(){...},function(){...} )6.toogle(function1, function2, ...)
該方法作用是單擊對象時(shí)循環(huán)調(diào)用函數(shù)列表中的函數(shù)
7.live(type, function)
該方法為整個(gè)頁面生命周期內(nèi)的某一類對象綁定一個(gè)事件處理程序
?
事件刪除方法:
1.unbind([type] [,data])
該方法刪除匹配對象的事件處理程序,與bind方法對應(yīng),可以刪除所有以bind方式綁定的自定義事件處理程序。如果所有參數(shù)都省略,將刪除匹配對象的所有事件及事件處理程序;如果只有第一個(gè)type參數(shù),將刪除指定事件類型的時(shí)間處理程序。如:
$("#btn").unbind("click");如果同時(shí)指定兩個(gè)參數(shù),將刪除指定事件類型的指定事件處理程序。如,btn綁定以下函數(shù):
var btnClick = function(){...};
則刪除btn的該事件處理程序的代碼為:
$("#btn").unbind("click", btnClick);2.die([tyoe] [,function])
該方法與live方法對應(yīng),用于解除live注冊的自定義事件。參數(shù)與unbind方法類似。
?
模擬操作:
模擬操作就是模擬用戶觸發(fā)相應(yīng)的事件,如一個(gè)事件觸發(fā)另一個(gè)事件。
1.<type>()
如觸發(fā)一個(gè)按鈕的單擊事件:
$("button").click();2.trigger(type [,data])
如觸發(fā)一個(gè)按鈕的單擊事件:
$("button").trigger("click");3.triggerHandler(type [,data])
與 trigger 方法不同:
該方法只觸發(fā)對象集合中的第一個(gè)元素的事件處理程序。且返回的是事件處理程序的返回值,而不是可鏈接的jQuery對象。該方法不會觸發(fā)事件冒泡
?
jQuery事件對象:
1.事件對象的屬性
type:獲得該對象的事件類型,如click, focus, mouseover等
target:獲得事件觸發(fā)者(DOM對象)
data:獲得調(diào)用事件時(shí)傳入的額外參數(shù)集合
relatedTarget:獲得觸發(fā)鼠標(biāo)事件的DOM元素
currentTarget:獲得當(dāng)前DOM元素(等同于this關(guān)鍵字)
pageX/pageY:獲得鼠標(biāo)事件中,鼠標(biāo)光標(biāo)相對于頁面左上角的位置
result:獲得上一個(gè)事件處理函數(shù)返回的值
timeStamp:獲得事件發(fā)生的時(shí)間戳
2.事件對象的方法
| 函數(shù)名 | 說明 | 例子 |
| preventDefault() | 取消元素事件的默認(rèn)動作 例如: 對于超級鏈接a來說,有href屬性,那么在點(diǎn)擊a的時(shí)候就會導(dǎo)航至href所指向位置.我們在a的click事件中,調(diào)用本方法,就不會導(dǎo)航到指定位置 | //取消事件默認(rèn)動作 $("a").bind("click", function (e) {e.preventDefault(); }); |
| isDefaultPrevented() | 是否調(diào)用過preventDefault()方法 | e.isDefaultPrevented() |
| stopPropagation() | 取消事件冒泡 | e.stopPropgation(); |
| isPropagationStopped() | 是否調(diào)用過stopPropagation()方法 | e.isPropagationStopped() |
| stopImmediatePropagation() | 取消執(zhí)行該元素該事件處理函數(shù)的后續(xù)事件處理函數(shù), 并取消事件冒泡 | $("a").bind("click", function (e) {e.stopImmediatePropagation(); });//不會被執(zhí)行到 $("a").click(function () {alert("我被點(diǎn)擊了"); }); |
| isImmediatePropagationStopped() | 是否調(diào)用過stopImmediatePropagation()方法 | $("a").bind("click", function (e) {e.stopImmediatePropagation();alert(e.isImmediatePropagationStopped()); }); |
例如:要在鼠標(biāo)移動時(shí)獲取鼠標(biāo)的位置:
$(document).mouseover(function(event){var msg = event.pageX + " " + event.pageY;alert(msg); });總結(jié)
以上是生活随笔為你收集整理的jQuery 事件绑定方法(bind hover toggle live.... )、删除事件方法(unbind, die)及 事件对象的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: js实现textarea根据内容大小自适
- 下一篇: javascript判断ie浏览器