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 TO HTML 转换
Jun 26 Javascript
JavaScript高级程序设计(第3版)学习笔记 概述
Oct 11 Javascript
js实现收缩菜单效果实例代码
Oct 30 Javascript
多种方法实现load加载完成后把图片一次性显示出来
Feb 19 Javascript
JS打开新窗口防止被浏览器阻止的方法
Jan 03 Javascript
JavaScript的Backbone.js框架入门学习指引
May 07 Javascript
JS实现可编辑的后台管理菜单功能【附demo源码下载】
Sep 13 Javascript
js时间查询插件使用详解
Apr 07 Javascript
bootstrap轮播图示例代码分享
May 17 Javascript
Vue中 key keep-alive的实现原理
Sep 18 Javascript
JS 实现获取验证码 倒计时功能
Oct 29 Javascript
vue2路由基本用法实例分析
Mar 06 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
解析curl提交GET,POST,Cookie的简单方法
2013/06/29 PHP
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
jQuery+PHP实现的掷色子抽奖游戏实例
2015/01/04 PHP
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
JavaScript 创建对象和构造类实现代码
2009/07/30 Javascript
使用jQuery清空file文件域的解决方案
2013/04/12 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
2013/04/26 Javascript
js转化毫秒为时间格式代码
2014/04/10 Javascript
javascript事件冒泡简单示例
2016/06/20 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
js按条件生成随机json:randomjson实现方法
2017/04/07 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
IE9 elementUI文件上传的问题解决
2018/10/17 Javascript
vuex存储token示例
2019/11/11 Javascript
[02:32]DOTA2完美大师赛场馆静安体育中心观赛全攻略
2017/11/08 DOTA
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
python 对txt中每行内容进行批量替换的方法
2018/07/11 Python
windows7 32、64位下python爬虫框架scrapy环境的搭建方法
2018/11/29 Python
Pycharm小白级简单使用教程
2020/01/08 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
如何在django中实现分页功能
2020/04/22 Python
python从PDF中提取数据的示例
2020/10/30 Python
利用CSS3的线性渐变linear-gradient制作边框的示例
2016/06/02 HTML / CSS
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
Nike加拿大官网:Nike.com (CA)
2019/04/09 全球购物
Derek Rose官网:英国高档睡衣、家居服和内衣品牌
2020/01/18 全球购物
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
产品销售员岗位职责
2013/12/18 职场文书
考察现实表现材料
2014/05/19 职场文书
校园安全广播稿范文
2014/09/25 职场文书
工作调动申请报告
2015/05/18 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
如何计划开一家便利店?
2019/07/31 职场文书
Go gorilla/sessions库安装使用
2022/08/14 Golang