jQuery中on()方法用法實(shí)例

更新時(shí)間：2015年01月19日 11:22:44 投稿：shichen2014

這篇文章主要介紹了jQuery中on()方法用法,實(shí)例分析了on()方法的功能、定義及在匹配元素上綁定一個(gè)或者多個(gè)事件處理函數(shù)的使用技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery中on()方法用法。分享給大家供大家參考。具體分析如下：

此方法可以在匹配元素上綁定一個(gè)或者多個(gè)事件處理函數(shù)。
使用off()方法可以刪除on()方法綁定的事件。

語(yǔ)法結(jié)構(gòu)一:

復(fù)制代碼代碼如下:

$(selector).on(events,[selector],[data],fn)

參數(shù)列表:

參數(shù)	描述
events	一個(gè)或多個(gè)用空格分隔的事件類型和可選的命名空間。
selector	可選。一個(gè)選擇器字符串，用以過濾選定的元素，該選擇器的后裔元素將調(diào)用處理程序。如果選擇是空或被忽略，當(dāng)它到達(dá)選定的元素，事件總是觸發(fā)。
data	可選。作為event.data屬性值傳遞給事件對(duì)象的額外數(shù)據(jù)對(duì)象以供事件處理函數(shù)處理。
fn	該事件被觸發(fā)時(shí)執(zhí)行的函數(shù)。 false值也可以做一個(gè)函數(shù)的簡(jiǎn)寫，返回false。

實(shí)例代碼:

實(shí)例一:

復(fù)制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.fzitv.net/" />

<title>腳本之家</title>

<style type="text/css">

div{

  width:60px;

  height:60px;

  border:1px solid green;

  font-size:12px;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("div").on("click",function(){ 

    $(this).text("腳本之家歡迎您"); 

  }) 

}) 

</script>

</head>

<body>

<div>原來內(nèi)容</div>

</body>

</html>

以上代碼為div綁定一個(gè)click事件，點(diǎn)擊div時(shí)候能夠?yàn)閐iv設(shè)置新的文本內(nèi)容。

實(shí)例二:

復(fù)制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.fzitv.net/" />

<title>腳本之家</title>

<style type="text/css">

div{

  width:60px;

  height:60px;

  border:1px solid green;

  font-size:12px;

}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){ 

  $("div").on("click mousemove",function(){ 

    $(this).text("腳本之家歡迎您"); 

  }) 

}) 

</script>

</head>

<body>

<div>原來內(nèi)容</div>

</body>

</html>

以上代碼為div綁定了兩個(gè)事件，無(wú)論是點(diǎn)擊div還是在div中移動(dòng)鼠標(biāo)都會(huì)為div設(shè)置新的文本內(nèi)容。

實(shí)例三:

復(fù)制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.fzitv.net/" />

<title>腳本之家</title> 

<style type="text/css"> 

div{ 

  width:60px; 

  height:60px; 

  border:1px solid green; 

  font-size:12px; 

} 

</style> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 

  var newtext="這是新文本" 

  $("div").on("click",{"mytext":newtext},function(e){ 

    $(this).text(e.data.mytext); 

  }) 

}) 

</script> 

</head> 

<body> 

  <div>原來內(nèi)容</div> 

</body> 

</html>

以上代碼利用data參數(shù)為綁定的事件處理函數(shù)傳遞數(shù)據(jù)。

實(shí)例四:

復(fù)制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.fzitv.net/" />

<title>腳本之家</title>

<style type="text/css">

.parent{

  width:160px;

  height:160px;

  border:1px solid green;

  font-size:12px;

}

.children{

  width:100px;

  height:100px;

  border:1px solid red;

}

span{background-color:green;}

</style>

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>

<script type="text/javascript"> 

$(document).ready(function(){ 

  var newtext="這是新文本" 

  $(".parent").on("click",".children",{"mytext":newtext},function(e){ 

    $(this).text(e.data.mytext); 

  }) 

}) 

</script>

</head>

<body>

<div class="parent">

  <div class="children"><span>原來內(nèi)容</span></div>

</div>

<span>大家好</span>

</body>

</html>

以上代碼通過通過選擇器字符串來過濾匹配元素的子元素中哪些可以響應(yīng)綁定的事件。上面的代碼中，類名為children的元素和它的子元素可以調(diào)用綁定的事件。
語(yǔ)法結(jié)構(gòu)二:

復(fù)制代碼代碼如下:

$(selector).on(object,[selector],[data])

參數(shù)列表:

參數(shù)	描述
object	一個(gè)用字符串表示的，一個(gè)或多個(gè)空格分隔的事件類型和可選的命名空間，值表示事件綁定的處理函數(shù)。
selector	可選。一個(gè)選擇器字符串，用以過濾選定的元素，該選擇器的后裔元素將調(diào)用處理程序。如果選擇是空或被忽略，當(dāng)它到達(dá)選定的元素，事件總是觸發(fā)。
data	可選。作為event.data屬性值傳遞給事件對(duì)象的額外數(shù)據(jù)對(duì)象以供事件處理函數(shù)處理。

實(shí)例代碼:

復(fù)制代碼代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.fzitv.net/" /> 

<title>腳本之家</title> 

<style type="text/css"> 

div{ 

  width:160px; 

  height:160px; 

  border:1px solid green; 

  font-size:12px; 

} 

</style> 

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 

<script type="text/javascript"> 

$(document).ready(function(){ 

  var newtext="這是新文本" 

  $("div").on({click:function(e){ 

    $(this).text(e.data.mytext); 

  }},{"mytext":newtext}) 

}) 

</script> 

</head> 

<body> 

  <div>原來內(nèi)容</div> 

</body> 

</html>