DIV CSS 佈局教程網

jquery事件詳解
編輯:JQuery特效代碼     

1、加載DOM
$(document).ready()方法,替代傳統的JavaScript中的window.load()
區別:
1、windows.onload()只可以使用一次,\((document).ready()可以使用多次。 2、windows.onload()在窗體加載完畢後觸發,而\)(document).ready()在DOM完全就緒的時候就可以被調用
3、簡寫方式$(document).ready()可以簡寫成$(function(){});,還可以簡寫成$().ready(function(){})
2、事件綁定
bind()方法可以用來綁定事件,且可以多次調用,格式為:
bind(type[ , data],fn);
第一個參數為事件類型,包括:blur、focus、load、resize、click等,也可以自定義。
第二個參數為可選參數,作為event.data屬性值傳遞給事件對象的額外數據對象。
第三個參數用來綁定的處理函數。
$(function(){
$("#body h5.head").bind("click",function(){
$(this).next().show(); //獲取$(this).next()元素
})
});
2.1 改變綁定事件的類型
$(function(){
$("#body h5.head").bind("mouseover",function(){
$(this).next().show(); //綁定mouseover事件
}).bind("mouseout",function(){
$(this).next().hide(); //綁定mouseout事件
})
});
等待DOM裝載完畢。
找到#body所在元素,綁定mouseover事件
找到內容元素,執行事件
找到#body所在元素,綁定mouseout事件
找到內容元素,執行事件
簡寫綁定事件的方式
$(function(){
$("#body h5.head").mouseover(function(){
$(this).next().show(); //綁定mouseover事件
}).mouseout(function(){
$(this).next().hide(); //綁定mouseout事件
})
});
3. 事件冒泡
事件冒泡
: 這個概念通俗來講,就是頁面上多個元素響應了同一個事件,這些元素有可能是包含、嵌套關系,當事件發生時,會按照元素的嵌套順序從內向外進行執行,直到頂端。
為了解決這些問題,引入以下內容:
3.1 事件對象
在程序中使用事件對象,只需要在函數
$(function(){
$("#element").bind("mouseover",function(event){
//event:事件對象
});
當點擊element元素時,事件對象被創建,這個對象只有在事件處理函數才可以訪問到,事件處理函數執行完畢後,事件對象就會被銷毀。
3.2 停止事件冒泡
停止事件冒泡可以阻止事件中其他對象的事件處理函數被執行。jQuery提供了stopPropagation()方法來停止事件冒泡。
$(function(){
$("#element").bind("mouseover",function(event){
//event:事件對象
event.stopPropagation();//停止事件冒泡
});
3.3 阻止默認行為
網頁上的元素有自己默認的行為,jQuery提供了preventDefault()方法來阻止元素的默認行為。
$(function(){
$("#submit").bind("click",function(event){
//event:事件對象
event.preventDefault();//阻止默認行為(表單提交)
});
如果同時想對事件對象停止冒泡和默認行為,可以在事件處理函數中返回false,這是對在事件上同時調用stopPrapagation()和preventDefault()方法的一種簡寫形式。
3.4 事件捕獲
與事件冒泡相反的兩個過程,事件捕獲是從最頂端往下開始觸發。但是jQuery目前不支持事件捕獲。
4 事件對象的屬性
event.type 獲取到事件的類型
event.preventDefault() 阻止事件的默認行為
event.stopPropagation() 阻止事件冒泡
event.target() 獲取到觸發事件的元素
event.relatedTarget 獲取到觸發事件的元素
event.pageX和event.pageY 獲取到光標相對頁面的x坐標和y坐標
event.which 在鼠標點擊事件中獲取鼠標的左1、中2、右3鍵,和鍵盤的按鍵
event.metaKey 為鍵盤事件中獲取ctrl按鍵
5 移除事件
5.1 移除按鈕元素上以前注冊的事件
$("#submit").unbind();//刪除所???綁定事件
$("#submit").unbind("click");//刪除click事件
如果沒有參數,則移除所有的綁定事件,若提供事件類型參數,則只刪除該類型的綁定事件。
5.2 one()方法
jQuery提供的one()方法,可以為元素綁定處理函數,當函數觸發一次後,立即被刪除。即在每個對象上,事件處理函數只會被執行一次。
6 模擬操作
模擬操作
: 模擬用戶操作的方式,觸發類似於click類型的事件。
$("#submit").trigger("click");//模擬click事件
有時候trigger()方法執行後,會執行浏覽器默認行為,例如:
$("input").trigger("focus");
//不僅會觸發綁定的focus事件,也會使input本身得到焦點
若只想觸發綁定的focus事件,而不想執行浏覽器默認操作,可以使用另一個類似的方法triggerHandler("focus")
7 事件其他用法
7.1 綁定多個事件類型
$("input").bind("mouseover mouseout",function(){
$(this).toggleClass("over");
});
7.2 添加事件命名空間,便於管理

$("div").bind("mouseover.plugin mouseout",function(){
$(this).toggleClass("over");
});

$("div").bind("click.plugin",function(){
$(this).toggleClass("over");
});

$("div").bind("dbclick.plugin",function(){
$(this).toggleClass("over");
});

$("button").click(){
$("div").unbind(".plugin");
});
在綁定事件類型後面添加命名空間,這在刪除事件時只需要置頂命名空間即可。
7.3相同事件名稱,不同命名空間執行方法
可以為元素綁定相同的事件類型,然後以命名空間的不同按需調用。

$("div").bind("click",function(){
$(this).toggleClass("over");
});

$("div").bind("click.plugin",function(){
$(this).toggleClass("over");
});

$("button").click(){
$("div").trigger("click!");
//帶!號,匹配所有不包含在命名空間中的click方法
});

$("div").bind("click.plugin",function(){
$("div").trigger("click");
//去掉!,兩者都會被觸發
});
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved