參數(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.dbjr.com.cn/" />

<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.dbjr.com.cn/" />

<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è)事件，無論是點(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.dbjr.com.cn/" />

<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.dbjr.com.cn/" />

<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	一個(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.dbjr.com.cn/" /> 

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