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 相关文章推荐
jquery实现文本框数量加减功能的例子分享
May 10 Javascript
JavaScript实现删除,移动和复制文件的方法
Aug 05 Javascript
基于jQuery仿淘宝产品图片放大镜代码分享
Jun 23 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
Jul 04 Javascript
node.js版本管理工具n无效的原理和解决方法
Nov 24 Javascript
js中动态创建json,动态为json添加属性、属性值的实例
Dec 02 Javascript
ES7中利用Await减少回调嵌套的方法详解
Nov 01 Javascript
Angular2.0实现modal对话框的方法示例
Feb 18 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 Javascript
详解ES6 Fetch API HTTP请求实用指南
Nov 14 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
Dec 20 Javascript
ES10的13个新特性示例(小结)
Sep 23 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
比特率,大家看看这个就不用收音机音质去比MP3音质了
2021/03/01 无线电
php-perl哈希算法实现(times33哈希算法)
2013/12/30 PHP
PHP判断来访是搜索引擎蜘蛛还是普通用户的代码小结
2015/09/14 PHP
PHP如何使用Memcached
2016/04/05 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
laravel框架select2多选插件初始化默认选中项操作示例
2020/02/18 PHP
Code: write(s,d) 输出连续字符串
2007/08/19 Javascript
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
2010/06/19 Javascript
关于JavaScript中name的意义冲突示例介绍
2014/05/29 Javascript
JavaScript和HTML DOM的区别与联系及Javascript和DOM的关系
2015/11/15 Javascript
JavaScript学习笔记整理_关于表达式和语句
2016/09/19 Javascript
深入学习js瀑布流布局
2016/10/14 Javascript
loading动画特效小结
2017/01/22 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
AngularJS路由实现页面跳转实例
2017/03/03 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
关于使用axios的一些心得技巧分享
2017/07/02 Javascript
JavaScript输入分钟、秒倒计时技巧总结(附代码)
2017/08/17 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
opencv 识别微信登录验证滑动块位置
2018/08/07 Javascript
PM2自动部署代码步骤流程总结
2018/12/10 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
2019/04/14 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
vuex存取值和映射函数使用说明
2020/07/24 Javascript
[01:08:09]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第二局
2016/03/02 DOTA
python3实现短网址和数字相互转换的方法
2015/04/28 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
解决python cv2.imread 读取中文路径的图片返回为None的问题
2020/06/02 Python
彻底弄明白CSS3的Media Queries(跨平台设计)
2010/07/27 HTML / CSS
Michael Kors美国官网:美式奢侈生活风格的代表
2016/11/25 全球购物
澳大利亚办公室装修:JasonL Office Furniture
2019/06/25 全球购物
退休欢送会主持词
2015/07/01 职场文书
html中显示特殊符号(附带特殊字符对应表)
2021/06/21 HTML / CSS