jQuery中on()方法用法实例

时间：2022-03-19 07:35:33

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

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>原来内容</div>

</body>

</html>

以上代码为div绑定一个click事件，点击div时候能够为div设置新的文本内容。

实例二:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.jb51.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>原来内容</div>

</body>

</html>

以上代码为div绑定了两个事件，无论是点击div还是在div中移动鼠标都会为div设置新的文本内容。

实例三:

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.jb51.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>原来内容</div>

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

<div class="parent">

  <div class="children"><span>原来内容</span></div>

</div>

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

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>原来内容</div>

</body>

</html>

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

希望本文所述对大家的jQuery程序设计有所帮助。

Bootstrap的Modal.js里的'click.bs.modal.data-api'在哪里触发？

最近在看Boostrap的Modal.js的源码，不只是Modal，其他的组件，比如button都用到了DATA-API，不是很清楚他的data api是怎么触发的，能否告知一下。

// MODAL DATA-API

// ==============

$(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) {

    // some code

  })

  // BUTTON DATA-API

  // ===============

  $(document)

    .on('click.bs.button.data-api', '[data-toggle^="button"]', function (e) {

      // some code

    })

    .on('focus.bs.button.data-api blur.bs.button.data-api', '[data-toggle^="button"]', function (e) {

      // some code

    })

这是一个Jquery的概念，只要出发了click事件，就会触发click.xxx,而在取消绑定的时候，off(click.xxx)不会影响到其他事件参考jquery文档：

Event names and namespaces（事件名称和命名空间） 任何事件的名称，可以作为events

参数。jQuery将通过所有浏览器的标准JavaScript事件类型，当用户操作事件，如click，浏览器会调用handler参数的函数。此外，.trigger()方法可以触发标准的浏览器事件

和 自定义事件名绑定的处理程序。

事件名称可以添加指定的event namespaces（命名空间）

来简化删除或触发事件。例如，"click.myPlugin.simple"为 click 事件同时定义了两个命名空间 myPlugin 和

simple。通过上述方法绑定的 click 事件处理，可以用.off("click.myPlugin") 或

.off("click.simple")删除绑定到相应元素的Click事件处理程序，而不会干扰其他绑定在该元素上的“click（点击）”

事件。命名空间类似CSS类，因为它们是不分层次的;只需要有一个名字相匹配即可。以下划线开头的名字空间是供 jQuery 使用的。

相关文章