搜尋

首頁 >web前端 >js教程 >分析jQuery中on()函數的作用及用法

分析jQuery中on()函數的作用及用法

巴扎黑
巴扎黑原創
2017-06-25 10:39:181799瀏覽

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

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

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

語法結構一:

程式碼如下:

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

參數清單:

參數 描述
#events 一個或多個以空格分隔的事件類型和可選的命名空間。
selector #可選。一個選擇器字串，用以過濾選定的元素，該選擇器的後裔元素將呼叫處理程序。
     如果選擇是空或被忽略，當它到達選定的元素，事件總是觸發。
data #可選。作為event.data屬性值傳遞給事件物件的額外資料物件以供事件處理函數處理。
fn 該事件被觸發時執行的函數。 false值也可以做一個函數的簡寫，回傳false。
#

實例程式碼:

實例一:

程式碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
p{
  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(){ 
  $("p").on("click",function(){ 
    $(this).text("脚本之家欢迎您"); 
  }) 
}) 
</script>
</head>
<body>
<p>原来内容</p>
</body>
</html>

以上程式碼為p綁定一個click事件，點選p時候能夠為p設定新的文字內容。

實例二:

程式碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<style type="text/css">
p{
  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(){ 
  $("p").on("click mousemove",function(){ 
    $(this).text("脚本之家欢迎您"); 
  }) 
}) 
</script>
</head>
<body>
<p>原来内容</p>
</body>
</html>

以上程式碼為p綁定了兩個事件，無論是點擊p還是在p中移動滑鼠都會為p設定新的文字內容。

實例三:

程式碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title> 
<style type="text/css"> 
p{ 
  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="这是新文本" 
  $("p").on("click",{"mytext":newtext},function(e){ 
    $(this).text(e.data.mytext); 
  }) 
}) 
</script> 
</head> 
<body> 
  <p>原来内容</p> 
</body> 
</html>

以上程式碼利用data參數為綁定的事件處理函數傳遞資料。

實例四:

程式碼如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.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>
<p class="parent">
  <p class="children"><span>原来内容</span></p>
</p>
<span>大家好</span>
</body>
</html>

以上程式碼透過透過選擇器字串來過濾哪些符合元素的子元素中可以回應綁定的事件。上面的程式碼中，類別名為children的元素和它的子元素可以呼叫綁定的事件。
語法結構二:

程式碼如下:

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

參數清單:

参数 描述
object 一个用字符串表示的，一个或多个空格分隔的事件类型和可选的命名空间，值表示事件绑定的处理函数。
selector 可选。一个选择器字符串，用以过滤选定的元素，该选择器的后裔元素将调用处理程序。
     如果选择是空或被忽略，当它到达选定的元素，事件总是触发。
data 可选。作为event.data属性值传递给事件对象的额外数据对象以供事件处理函数处理。

实例代码:

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" /> 
<title>脚本之家</title> 
<style type="text/css"> 
p{ 
  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="这是新文本" 
  $("p").on({click:function(e){ 
    $(this).text(e.data.mytext); 
  }},{"mytext":newtext}) 
}) 
</script> 
</head> 
<body> 
  <p>原来内容</p> 
</body> 
</html>

以上代码中，事件类型和事件处理函数以对象的形式绑定的。

以上是分析jQuery中on()函數的作用及用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：jQuery on()方法範例及優點下一篇：jQuery on()方法範例及優點

相關文章

看更多