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 相关文章推荐
javascript与CSS复习(三)
Jun 29 Javascript
Extjs4实现两个GridPanel之间数据拖拽功能具体方法
Nov 21 Javascript
js替代copy(示例代码)
Nov 27 Javascript
JavaScript控制table某列不显示的方法
Mar 16 Javascript
javascript获取网页宽高方法汇总
Jul 19 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
Mar 08 Javascript
基于RequireJS和JQuery的模块化编程——常见问题全面解析
Apr 14 Javascript
AngularJS中的API(接口)简单实现
Jul 28 Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 Javascript
微信小程序  modal弹框组件详解
Oct 27 Javascript
vue实现放大镜效果
Sep 17 Javascript
js基于canvas实现时钟组件
Feb 07 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递归调用与静态变量使用
2012/12/16 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
PHP爬虫之百万级别知乎用户数据爬取与分析
2016/01/22 PHP
Laravel 5.5官方推荐的Nginx配置学习教程
2017/10/06 PHP
Thinkphp5框架ajax接口实现方法分析
2019/08/28 PHP
PHP终止脚本运行三种实现方法详解
2020/09/01 PHP
首页图片漂浮效果示例代码
2014/06/05 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
常用的JS验证和函数汇总
2014/12/23 Javascript
jQuery中fadeOut()方法用法实例
2014/12/24 Javascript
Angular.js 实现数字转换汉字实例代码
2016/07/14 Javascript
用JavaScript和jQuery实现瀑布流
2017/03/19 Javascript
基于jquery日历价格、库存等设置插件
2020/07/05 jQuery
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
Vue实现简单分页器
2018/12/29 Javascript
帮你彻底搞懂JS中的prototype、__proto__与constructor(图解)
2019/08/23 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
Python 多线程抓取图片效率对比
2016/02/27 Python
使用python根据端口号关闭进程的方法
2018/11/06 Python
Django REST framework 分页的实现代码
2019/06/19 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
Python变量作用域LEGB用法解析
2020/02/04 Python
python性能测试工具locust的使用
2020/12/28 Python
浅谈Python xlwings 读取Excel文件的正确姿势
2021/02/26 Python
详解使用双缓存解决Canvas clearRect引起的闪屏问题
2019/04/29 HTML / CSS
上班早退检讨书
2014/01/09 职场文书
银行见习期自我鉴定
2014/01/29 职场文书
工作总结与自我评价
2014/09/18 职场文书
合理化建议书
2015/02/04 职场文书
2015年小学生暑假总结
2015/07/13 职场文书
使用python绘制分组对比柱状图
2022/04/21 Python
解决Oracle数据库用户密码过期
2022/05/11 Oracle
MySQL数据库安装方法与图形化管理工具介绍
2022/05/30 MySQL