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 相关文章推荐
线路分流自动跳转代码;希望对大家有用!
Dec 02 Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 Javascript
javascript操纵OGNL标签示例代码
Jun 16 Javascript
JS模拟Dialog弹出浮动框效果代码
Oct 16 Javascript
基于javascript实现页面加载loading效果
Sep 15 Javascript
深入理解angularjs过滤器
May 25 Javascript
bootstrap实现图片自动轮播
Dec 21 Javascript
详解angularjs 学习之 scope作用域
Jan 15 Javascript
解决vue 按钮多次点击重复提交数据问题
May 10 Javascript
JS实现快递单打印功能【推荐】
Jun 21 Javascript
vue组件开发props验证的实现
Feb 12 Javascript
在antd Form表单中select设置初始值操作
Nov 02 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生成随机密码的三种方法小结
2010/09/04 PHP
使用PHP生成图片的缩略图的方法
2015/08/18 PHP
PHP错误Warning:mysql_query()解决方法
2015/10/24 PHP
JQuery打造PHP的AJAX表单提交实例
2009/11/03 Javascript
精通Javascript系列之Javascript基础篇
2011/06/07 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
2013/04/01 Javascript
javaScript对文字按照拼音排序实现代码
2013/12/27 Javascript
可编辑下拉框的2种实现方式
2014/06/13 Javascript
JS、CSS以及img对DOMContentLoaded事件的影响
2014/08/12 Javascript
jquery增加和删除元素的方法
2015/01/14 Javascript
Javascript小技能总结(推荐)
2016/06/02 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
读Javascript高性能编程重点笔记
2016/12/21 Javascript
vue中for循环更改数据的实例代码(数据变化但页面数据未变)
2017/09/15 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
2017/09/18 Javascript
讲解vue-router之什么是动态路由
2018/05/28 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
2020/08/14 Javascript
python实现查询苹果手机维修进度
2015/03/16 Python
Python实现将文本生成二维码的方法示例
2017/07/18 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
导入tensorflow:ImportError: libcublas.so.9.0 报错
2020/01/06 Python
Python Tornado实现WEB服务器Socket服务器共存并实现交互的方法
2020/05/26 Python
python程序需要编译吗
2020/06/19 Python
谈谈python垃圾回收机制
2020/09/27 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
美国购买韩国护肤和美容产品网站:Althea Korea
2020/11/16 全球购物
Java servlet面试题
2012/03/04 面试题
写给爸爸的道歉信
2014/01/15 职场文书
企业车辆管理制度
2014/01/24 职场文书
新闻专业学生的自我评价
2014/02/13 职场文书
2014年党务公开方案
2014/05/08 职场文书
2015社区爱国卫生工作总结
2015/04/21 职场文书
毕业论文致谢部分怎么写
2015/05/14 职场文书