JQuery入门——用映射方式绑定不同事件应用示例


Posted in Javascript onFebruary 05, 2013

1、通过映射的方式,给对象绑定多个事件

2、示例代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>映射方式绑定不同事件</title> 
<script type="text/javascript" src="jquery-1.8.3.min.js"></script> 
<script type="text/javascript"> 
$(function(){ 
$(".txt").bind({focus:function(){ 
$("#divTip").show().html("执行的是focus事件"); 
}, 
change:function(){ 
$("#divTip").show().html("执行的是change事件"); 
} 
}) 
}) 
</script> 
</head> <body> 
<div>姓名:<input type="text" class="txt"/></div> 
<div id="divTip" class="clsTip"></div> 
</body> 
</html>

3、效果图预览:

将光标置于文本框中点击显示效果如下:

JQuery入门——用映射方式绑定不同事件应用示例

在文本框中输入内容然后将光标单击其他空白页面效果如下:

JQuery入门——用映射方式绑定不同事件应用示例

Javascript 相关文章推荐
离开页面时检测表单元素是否被修改,提示保存的js代码
Aug 25 Javascript
javascript中数组的sort()方法的使用介绍
Dec 18 Javascript
jquery操作select详解(取值,设置选中)
Feb 07 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
Mar 03 Javascript
Node.js中的process.nextTick使用实例
Jun 25 Javascript
jquery.map()方法的使用详解
Jul 09 Javascript
AngularJS基础 ng-dblclick 指令用法
Aug 01 Javascript
js格式化时间的简单实例
Nov 27 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
Dec 08 Javascript
详解Vue2中组件间通信的解决全方案
Jul 28 Javascript
js Dom实现换肤效果
Oct 21 Javascript
请求时token过期自动刷新token操作
Sep 11 Javascript
JQuery入门——事件切换之hover()方法应用介绍
Feb 05 #Javascript
JQuery入门——事件切换之toggle()方法应用介绍
Feb 05 #Javascript
JQuery入门——移除绑定事件unbind方法概述及应用
Feb 05 #Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
Feb 05 #Javascript
jquery 卷帘效果实现代码(不同方向)
Feb 05 #Javascript
window.open关于浏览器拦截问题分析及解决方法
Feb 05 #Javascript
jQuery.prototype.init选择器构造函数源码思路分析
Feb 05 #Javascript
You might like
PHP中uploaded_files函数使用方法详解
2011/03/09 PHP
PHP往XML中添加节点的方法
2015/03/12 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
javascript 进阶篇1 正则表达式,cookie管理,userData
2012/03/14 Javascript
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
2015/08/05 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
利用JavaScript实现拖拽改变元素大小
2016/12/14 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
BootStrap给table表格的每一行添加一个按钮事件
2017/09/07 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
2017/10/30 Javascript
Vue中的基础过渡动画及实现原理解析
2018/12/04 Javascript
详解nuxt 微信公众号支付遇到的问题与解决
2019/08/26 Javascript
微信小程序在text文本实现多种字体样式
2019/11/08 Javascript
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
[38:39]完美世界DOTA2联赛循环赛 IO vs GXR BO2第二场 11.04
2020/11/05 DOTA
Python功能点实现:函数级/代码块级计时器
2019/01/02 Python
python变量命名的7条建议
2019/07/04 Python
python和JavaScript哪个容易上手
2020/06/23 Python
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
YSL圣罗兰美妆美国官网:Yves Saint Lauret US
2016/11/21 全球购物
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
JustFab加拿大:女鞋、靴子、手袋和服装在线
2018/05/18 全球购物
校运动会广播稿300字
2014/10/07 职场文书
计算机专业自荐信
2015/03/05 职场文书
首都博物馆观后感
2015/06/05 职场文书
初中语文教学研修日志
2015/11/13 职场文书
使用Redis实现实时排行榜功能
2021/07/02 Redis
pandas中对文本类型数据的处理小结
2021/11/01 Python
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫
解决MySQL报“too many connections“错误
2022/04/19 MySQL
MySQL数据库查询之多表查询总结
2022/08/05 MySQL
HttpClient实现文件上传功能
2022/08/14 Java/Android