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 相关文章推荐
window.parent与window.openner区别介绍
Apr 12 Javascript
extjs render 用法介绍
Sep 11 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
js实现数组转换成json
Jun 26 Javascript
Javascript实现的Map集合工具类完整实例
Jul 31 Javascript
JavaScript中的this机制
Jan 30 Javascript
仿百度换肤功能的简单实例代码
Jul 11 Javascript
mui上拉加载更多下拉刷新数据的封装过程
Nov 03 Javascript
Vue按需加载的具体实现
Dec 02 Javascript
使用webpack打包koa2 框架app
Feb 02 Javascript
基于Vue实现拖拽功能
Jul 29 Javascript
Element Carousel 走马灯的具体实现
Jul 26 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
如何利用预加载优化Laravel Model查询详解
2017/08/11 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
jquery显示隐藏input对象
2014/07/21 Javascript
JavaScript控制网页层收起和展开效果的方法
2015/04/15 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
果断收藏9个Javascript代码高亮脚本
2016/01/06 Javascript
JavaScript中使用数组方法汇总
2016/02/16 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
js使用Replace结合正则替换重复出现的字符串功能示例
2016/12/27 Javascript
如何获取元素的最终background-color
2017/02/06 Javascript
JavaScript编写的网页小游戏,很给力
2017/08/18 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
vue生命周期与钩子函数简单示例
2019/03/13 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
Vue自定义render统一项目组弹框功能
2020/06/07 Javascript
对于Python装饰器使用的一些建议
2015/06/03 Python
Python读取和处理文件后缀为.sqlite的数据文件(实例讲解)
2017/06/27 Python
想学python 这5本书籍你必看!
2018/12/11 Python
python全栈要学什么 python全栈学习路线
2019/06/28 Python
使用python去除图片白色像素的实例
2019/12/12 Python
利用python3 的pygame模块实现塔防游戏
2019/12/30 Python
PyTorch的torch.cat用法
2020/06/28 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
Gucci法国官方网站:意大利奢侈品牌
2018/07/25 全球购物
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
介绍下Java的输入输出流
2014/01/22 面试题
顶碗少年教学反思
2014/02/21 职场文书
材料会计岗位职责
2014/03/06 职场文书
遗嘱继承公证书
2014/04/09 职场文书
2015年检验科工作总结
2015/04/27 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书
高效笔记技巧分享:学会这些让你不再困扰
2019/09/04 职场文书
python中print格式化输出的问题
2021/04/16 Python