jQuery中on()方法用法实例
2024-10-19 04:01:26
这篇文章主要介绍了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 使用的。
最新文章
- CodeForces 548
- asp.net core 通过 TeamCity 实现持续集成笔记
- ROS主题发布订阅
- [转贴]JAVA :RESTLET开发实例(一)基于JAX-RS的REST服务
- Eclipse 4.2 + Tomcat 7.x + JDK 7 搭建Java Web开发环境
- java-finalize
- [Gitlab运维系列]Gitlab 403 forbidden 并发引起IP被封
- Java基础总结--数组
- Flume环境搭建_五种案例
- linux下编译opencv
- CSS3_多列布局
- 爬虫_中国天气网_文字天气预报(xpath)
- [20171223]grid用户的环境变量问题.txt
- win8和win7下解决php5.3和5.4、5.5等不能加载php_curl.dll的终极解决办法 收藏
- Android之扫描文件或文件夹
- Hi3516CV300 sample ->; region
- 小朋友学C语言(1):Hello World
- IntelliJ IDEA创建maven web项目(IDEA新手适用)
- JavaScript ES6 核心功能一览(转)
- mono 的System.Data.SqlClient小记录
热门文章
- 史上最严管控,Android P非SDK接口管控特性解读及适配
- Spider Studio 新版本 (20140225) - 设置菜单调整 / 提供JQueryContext布局相关的方法
- HTML5关于上传API的一些使用(上)
- 第二百四十九节,Bootstrap附加导航插件
- backbone.js初探(转)
- .NET Entity Framework(EF)使用SqlQuery直接操作SQL查询语句或者执行过程
- Shell应用之遍历回收站RecycleBin
- STL容器:list双向链表学习
- Ubantu apt source 国内
- ios开发之 --调用系统的页面,显示中文