首頁 > web前端 > js教程 > jQuery中bind()方法如何使用

jQuery中bind()方法如何使用

清浅
發布: 2020-09-04 13:45:17
原創
4025 人瀏覽過

本篇文章將分享的是有關jQuery中事件綁定的方法bind(),有一定的參考價值,希望對大家學習有所幫助!

jQuery處理事件最重要的兩種方法就是事件綁定bind()方法和事件移除unbind()方法,就是將程式碼加入一組元素上的一個或多個事件中,今天將詳細的介紹bind()方法的使用

bind()方法

#bind() 方法就是為被選元素添加一個或多個事件處理程序,並規定事件發生時運行的函數。

$(selector).bind(event,data,function)

event :規定新增到元素的一個或多個事件,可用空格分隔多個事件而且必須是有效的事件。   

data :指傳遞到函數的額外資料。

function :指當事件發生時執行的函數   

範例

<a href="#">Test 1</a>
<a href="#">Test 2</a>
<script src="jquery/jquery-1.12.4.js"></script>
<script>
$(function(){//入口函数
$("a").bind("click", function() {

alert($(this).text());

});
});
登入後複製

結果

Image 4.jpg

當點擊a鏈接時,由於a連結綁定了事件click,所以點擊時會彈出一個框顯示內容,jQuery會自動將點擊的元素分配給匿名函數內的「this」關鍵字,允許存取激活元素的元素,同時可以觸發多個事件

<div id="div" style="background-color:pink;width:100px;height:100px;"></div>
<script src="jquery/jquery-1.12.4.js"></script>
<script>
$("#div").bind("mousemove", function(event){
$(this).text(event.pageX + "," + event.pageY);});
登入後複製

結果

Image 5.jpg

我們建立一個長和寬都為100px,粉紅色的一個div元素。對於這個div,我們使用帶有名為“event”的參數的匿名函數來綁定mousemove事件,當滑鼠滑過時我們可以訪問到pageX和pageY屬性,告訴我們滑鼠遊標目前在頁面的哪個位置,顯示在盒子的左上角。將遊標移到div元素不同的地方上,將可以看到不同的值更新顯示

bind()方法還可以透過data傳入自己的資料並讓事件物件存取它,也可以在綁定事件時設定值,並且能夠在呼叫事件時讀取此值

<a href="#">Test 1</a>
<a href="#">Test 2</a>
<script src="jquery/jquery-1.12.4.js"></script>
<script>
	var text = "Hello, world!";
	$(function(){
	$("a").bind("click", {message:text},function(event) {
	text = "hello";
	console.log(event.data.message);
	});});
</script>
	</script>
登入後複製

結果

Image 8.jpg

#我們將值作為bind()方法的輔助參數傳遞,作為鍵和值的映射,透過用逗號分隔它們來傳遞多個值。我們使用事件物件的data屬性。此屬性包含已傳遞的每個值的子屬性,這表示您可以使用event.data.message存取message參數的值。雖然在事件處理程序中更改了「text」變數的值,但程式運行結果還是「Hello,world!」

#總結:以上就是本篇文章的內容了,希望對大家學習jQuery事件綁定有所幫助。

以上是jQuery中bind()方法如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板