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 相关文章推荐
新手入门常用代码集锦
Jan 11 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
Feb 11 Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 Javascript
js实现收缩菜单效果实例代码
Oct 30 Javascript
node.js中的socket.io入门实例
Apr 26 Javascript
jQuery中next()方法用法实例
Jan 07 Javascript
js数组常见操作及数组与字符串相互转化实例详解
Nov 10 Javascript
javascript每日必学之运算符
Feb 16 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
Aug 25 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
使用MUI框架模拟手机端的下拉刷新和上拉加载功能
Sep 04 Javascript
详解layui中的树形关于取值传值问题
Jan 16 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设计模式  Command(命令模式)
2011/06/17 PHP
PHP处理Oracle的CLOB实例
2014/11/03 PHP
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
表单验证的完整应用案例探讨
2013/03/29 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
javascript实现在线客服效果
2015/07/15 Javascript
js运动应用实例解析
2015/12/28 Javascript
Easyui 之 Treegrid 笔记
2016/04/29 Javascript
js入门之Function函数的使用方法【新手必看】
2016/11/22 Javascript
BootStrap 动态表单效果
2017/06/02 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
2017/09/25 Javascript
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
2018/09/21 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
2019/05/02 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
JS实现提示框跟随鼠标移动
2019/08/27 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
2020/06/04 Javascript
[43:43]完美世界DOTA2联赛PWL S2 FTD.C vs Rebirth 第一场 11.22
2020/11/24 DOTA
Python中使用HTMLParser解析html实例
2015/02/08 Python
使用Python的Flask框架实现视频的流媒体传输
2015/03/31 Python
深入理解NumPy简明教程---数组2
2016/12/17 Python
带你了解python装饰器
2017/06/15 Python
python嵌套字典比较值与取值的实现示例
2017/11/03 Python
Python面向对象程序设计类的封装与继承用法示例
2019/04/12 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
python复合条件下的字典排序
2020/12/18 Python
Europcar西班牙:全球汽车租赁领域的领导者
2018/09/17 全球购物
实习教师个人的自我评价
2013/11/08 职场文书
庆七一活动方案
2014/01/25 职场文书
秋游活动策划方案
2014/02/16 职场文书
群众路线班子对照检查材料
2014/09/25 职场文书
新员工辞职信范文
2015/05/12 职场文书
音乐会主持人开场白
2015/05/28 职场文书
“爱眼护眼,提前预防近视”倡议书3篇
2019/10/30 职场文书
详解Go与PHP的语法对比
2021/05/29 PHP