jQuery中on()方法用法實例

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

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

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

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

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

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

參數(shù)列表:

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

實例代碼:

實例一:

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

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.dhdzp.com/" />

<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綁定一個click事件，點擊div時候能夠為div設(shè)置新的文本內(nèi)容。

實例二:

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

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.dhdzp.com/" />

<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綁定了兩個事件，無論是點擊div還是在div中移動鼠標都會為div設(shè)置新的文本內(nèi)容。

實例三:

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

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.dhdzp.com/" />

<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ù)。

實例四:

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

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.dhdzp.com/" />

<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)用綁定的事件。
語法結(jié)構(gòu)二:

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

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

參數(shù)列表:

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

實例代碼:

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

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.dhdzp.com/" /> 

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