jQuery學習筆記(5)


一、前言

主要講解事件的綁定與觸發

二、jQuery中添加事件

1.使用bind()方法綁定事件

<input id="btn" type="button" value="按鈕" />
<script>
$("#btn").bind("click", function (event) { alert("one"); });
</script>

2.添加多播事件委托

<input id="btn" type="button" value="按鈕" />
<script>
$("#btn").bind("click", function (event) { alert("one"); });
$("#btn").bind("click", function (event) { alert("two"); });
</script>

3.jQuery事件處理函數

$("p").bind("click", function () { alert($(this).text()); }); 為匹配元素的特定事件(像click)綁定一個事件處理器函數
$("p").one("click", function () { alert($(this).text()); }); 為匹配元素的特定事件(像click)綁定一個一次性的事件處理函數
trigger( event, [data] ) 匹配的元素上觸發某類事件
triggerHandler( event, [data] ) 觸發指定的事件類型上所有綁定的處理函數
$("p").unbind( "click" ); bind()的反向操作,從每一個匹配的元素中刪除綁定的事件

三、常用事件函數

1.bind( type, [data], fn )

注意方法簽名上data參數,可以在事件處理之前傳遞一些附加的數據

(1)使用自定義元素屬性存儲數據

<div id="divMsg" contentType ="Children">這是小孩可以看的內容</div>
<script>
$("#divMsg").bind("click", function(event) { alert($(event.target).attr("contentType")); });
</script>

(2)使用腳本將數據傳遞給事件處理函數

<div id="divMsg">這是小孩可以看的內容</div>
<script>
$("#divMsg").bind("click", { contentType: "Children" }, function (event) { alert(event.data.contentType); });
</script>

2.one( type, [data], fn )

使用和bind()函數一樣,但是只執行一次

trigger( event, [data] ) triggerHandler( event, [data] )
<button id="old">.trigger("focus")</button>
<button id="new">.triggerHandler("focus")</button><br />
<br />
<input type="text" value="To Be Focused" />
<div id="divResult"></div>
<script>
$(function () {
$("#old").click(function () {
//點擊文本框會聚焦
$("input").trigger("focus");
});
$("#new").click(function () {
//點擊文本寬不會聚焦
$("input").triggerHandler("focus");
});
});
</script>

四、快捷事件 Event Helpers

1.設置單擊事件方式:

$("p").click(function (event) { alert("aa"); });
//等效於下面寫法
$("p").bind("click", function (event) { alert("aa"); });

2.觸發單擊事件

$("p").click();
//等效於下面寫法
$("p").trigger("click");

3.jQuery的快捷方法列表

blur( fn )/blur( ) 當元素失去焦點時發生 blur 事件
change( fn )/change( ) 當元素的值改變時發生 change 事件
click( fn )/click( ) 當單擊元素時,發生 click 事件
dblclick( fn )/dblclick( ) 當雙擊元素時,發生 dblclick 事件
error( fn )/error( ) 當元素遇到錯誤時,發生 error 事件
focus( fn )/focus( ) 當元素獲得焦點時,發生 focus 事件
keydown( fn )/keydown( ) 當鍵盤鍵被按下時發生 keydown 事件
keypress( fn )/keypress( ) 當鍵盤鍵被按下時發生 keydown 事件
keyup( fn )/keyup( ) 當鍵盤鍵被松開時發生 keyup 事件
load( fn ) 當指定的元素已加載時,會發生 load 事件
mousedown( fn ) 當鼠標指針移動到元素上方,並按下鼠標左鍵時,會發生 mousedown 事件
mouseenter( fn ) 當鼠標指針穿過(進入)被選元素時,會發生 mouseenter 事件
mouseleave( fn ) 當鼠標指針離開被選元素時,會發生 mouseleave 事件
mousemove( fn ) 當鼠標指針在指定的元素中移動時,就會發生 mousemove 事件
mouseout( fn ) 當鼠標指針離開被選元素時,會發生 mouseout 事件
mouseover( fn ) 當鼠標指針位於元素上方時,會發生 mouseover 事件
mouseup( fn ) 當鼠標指針移動到元素上方,並松開鼠標左鍵時,會發生 mouseup 事件
resize( fn ) 當調整瀏覽器窗口大小時,發生 resize 事件
scroll( fn ) 當用戶滾動指定的元素時,會發生 scroll 事件
select( fn )/select( ) 當 textarea 或文本類型的 input 元素中的文本被選擇(標記)時,會發生 select 事件
submit( fn )/submit( ) 當提交表單時,會發生 submit 事件
unload( fn ) 當用戶離開頁面時,會發生 unload 事件

五、參考文章

http://www.cnblogs.com/zhangziqiu/archive/2009/05/06/jQuery-Learn-5.html


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com