jQuery中bind()的使用方法

這篇文章主要介紹了jQuery中bind()的使用方法，具有一定借鑒價(jià)值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

jQuery處理事件最重要的兩種方法就是事件綁定bind()方法和事件移除unbind()方法,就是將代碼添加到一組元素上的一個(gè)或者多個(gè)事件中，今天將詳細(xì)的介紹bind()方法的使用

bind()方法

bind() 方法就是為被選元素添加一個(gè)或多個(gè)事件處理程序，并規(guī)定事件發(fā)生時(shí)運(yùn)行的函數(shù)。

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

event ：規(guī)定添加到元素的一個(gè)或多個(gè)事件，可用空格分隔多個(gè)事件而且必須是有效的事件。

data ：指傳遞到函數(shù)的額外數(shù)據(jù)。

function ：指當(dāng)事件發(fā)生時(shí)運(yùn)行的函數(shù)

例

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

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

});
});

結(jié)果

當(dāng)點(diǎn)擊a鏈接時(shí)，由于a鏈接綁定了事件click，所以點(diǎn)擊時(shí)會(huì)彈出一個(gè)框顯示內(nèi)容，jQuery會(huì)自動(dòng)將單擊的元素分配給匿名函數(shù)內(nèi)的“this”關(guān)鍵字，允許訪問激活元素的元素，同時(shí)可以觸發(fā)多個(gè)事件

<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);});

結(jié)果

我們創(chuàng)建一個(gè)長和寬都為100px,粉色的一個(gè)div元素。對于這個(gè)div，我們使用帶有名為“event”的參數(shù)的匿名函數(shù)綁定mousemove事件，當(dāng)鼠標(biāo)滑過時(shí)我們可以訪問到pageX和pageY屬性，告訴我們鼠標(biāo)光標(biāo)當(dāng)前在頁面的哪個(gè)位置，顯示在盒子的左上角。將光標(biāo)移動(dòng)到div元素不同的地方上，將可以看到不同的值更新顯示

bind（）方法還可以通過data傳入自己的數(shù)據(jù)并讓事件對象訪問它，也可以在綁定事件時(shí)設(shè)置值，并且能夠在調(diào)用事件時(shí)讀取此值

<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>

結(jié)果

我們將值作為bind（）方法的輔助參數(shù)傳遞，作為鍵和值的映射，通過用逗號分隔它們來傳遞多個(gè)值。我們使用事件對象的data屬性。此屬性包含已傳遞的每個(gè)值的子屬性，這意味著您可以使用event.data.message訪問message參數(shù)的值。 雖然在事件處理程序中更改了“text”變量的值，但程序運(yùn)行結(jié)果還是“Hello，world！”

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享jQuery中bind()的使用方法內(nèi)容對大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，遇到問題就找億速云，詳細(xì)的解決方法等著你來學(xué)習(xí)!