cari

Rumah >hujung hadapan web >tutorial js >分析jQuery中on()函数的作用及用法

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

巴扎黑
巴扎黑asal
2017-06-25 10:39:181795semak imbas

这篇文章主要介绍了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>

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

Atas ialah kandungan terperinci 分析jQuery中on()函数的作用及用法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：jQuery on()方法示例及优点Artikel seterusnya：jQuery中delegate与on的用法区别及其实例介绍

Artikel berkaitan

Lihat lagi