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 相关文章推荐
网页常用特效代码整理
Jun 23 Javascript
一些易混淆且不常用的属性,希望有用
Jan 29 Javascript
javascript 冒泡排序 正序和倒序实现代码
Dec 14 Javascript
jQuery.fn和jQuery.prototype区别介绍
Oct 05 Javascript
javascript实现无限级select联动菜单
Jan 02 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
实例讲解jQuery中对事件的命名空间的运用
May 24 Javascript
使用get方式提交表单在地址栏里面不显示提交信息
Feb 21 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
Vue中遍历数组的新方法实例详解
Jul 21 Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 24 Javascript
深入分析JavaScript 事件循环(Event Loop)
Jun 19 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使用mkdir创建多级目录的方法
2015/12/22 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
一起来写段JS drag拖动代码
2010/12/09 Javascript
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
jquery中对于批量deferred的处理方法
2014/01/22 Javascript
jquery select 设置默认选中的示例代码
2014/02/07 Javascript
基于jquery的手风琴图片展示效果实现方法
2014/12/16 Javascript
JavaScript中switch语句的用法详解
2015/06/03 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
从零开始学习Node.js系列教程四:多页面实现的数学运算示例
2017/04/13 Javascript
微信小程序 wx:for的使用实例详解
2017/04/27 Javascript
js实现Tab选项卡切换效果
2020/07/17 Javascript
javaScript实现鼠标在文字上悬浮时弹出悬浮层效果
2020/04/12 Javascript
记一次webpack3升级webpack4的踩坑经历
2018/06/12 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
深入理解JS异步编程-Promise
2019/06/03 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
Python FTP操作类代码分享
2014/05/13 Python
python回调函数用法实例分析
2015/05/09 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
python flask搭建web应用教程
2019/11/19 Python
Keras - GPU ID 和显存占用设定步骤
2020/06/22 Python
浅谈tensorflow 中的图片读取和裁剪方式
2020/06/30 Python
谈谈python垃圾回收机制
2020/09/27 Python
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
使用HTML5的Canvas绘制曲线的简单方法
2015/09/08 HTML / CSS
巴西独家产品和现场演示购物网站:Shoptime
2019/07/11 全球购物
出口公司经理求职简历中的自我评价
2013/10/13 职场文书
党的群众路线学习材料
2014/05/16 职场文书
2014年个人售房协议书
2014/10/30 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
2015年社区教育工作总结
2015/05/13 职场文书
雷锋之歌观后感
2015/06/10 职场文书
小学副班长竞选稿
2015/11/21 职场文书
OpenCV3.3+Python3.6实现图片高斯模糊
2021/05/18 Python
bootstrapv4轮播图去除两侧阴影及线框的方法
2022/02/15 HTML / CSS