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 插件开发方法小结
Oct 23 Javascript
jquery禁止回车触发表单提交
Dec 12 Javascript
JavaScript 浏览器对象模型BOM使用介绍
Apr 13 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
Jun 13 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
JS实现的找零张数最小问题示例
Nov 28 Javascript
微信小程序实现团购或秒杀批量倒计时
Nov 01 Javascript
详解如何搭建mpvue框架搭配vant组件库的小程序项目
May 16 Javascript
深入理解JS异步编程-Promise
Jun 03 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
js实现滑动滑块验证登录
Jul 24 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堆栈与列队的学习
2013/06/21 PHP
php实现查看邮件是否已被阅读的方法
2013/12/03 PHP
PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
2014/06/25 PHP
php中删除、清空session的方式总结
2015/10/09 PHP
Yii2组件之多图上传插件FileInput的详细使用教程
2016/06/20 PHP
PHP抓取远程图片(含不带后缀的)教程详解
2016/10/21 PHP
用PHP去掉文件头的Unicode签名(BOM)方法
2017/06/22 PHP
借用Google的Javascript API Loader来加速你的网站
2009/01/28 Javascript
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
js函数的引用, 关于内存的开销
2012/09/17 Javascript
页面只能打开一次Cooike如何实现
2012/12/04 Javascript
了不起的node.js读书笔记之mongodb数据库交互
2014/12/22 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
js插件Jcrop自定义截取图片功能
2016/10/14 Javascript
Bootstrap CSS布局之代码
2016/12/17 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
Javascript调试之console对象——你不知道的一些小技巧
2017/07/10 Javascript
手把手教你使用vue-cli脚手架(图文解析)
2017/11/08 Javascript
前端Electron新手入门教程详解
2019/06/21 Javascript
解决Angularjs异步操作后台请求用$q.all排列先后顺序问题
2019/11/29 Javascript
全面解析js中的原型,原型对象,原型链
2021/01/25 Javascript
Python实现字典(dict)的迭代操作示例
2018/06/05 Python
python 常用的基础函数
2018/07/10 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
python脚本实现音频m4a格式转成MP3格式的实例代码
2019/10/09 Python
Python List列表对象内置方法实例详解
2019/10/22 Python
python tkinter canvas使用实例
2019/11/04 Python
完美解决TensorFlow和Keras大数据量内存溢出的问题
2020/07/03 Python
关于python中导入文件到list的问题
2020/10/31 Python
Speedo美国:澳大利亚顶尖泳衣制造商
2016/08/03 全球购物
会计电算化应届生求职信
2013/11/03 职场文书
工业设计专业个人求职信范文
2013/12/28 职场文书
2014各大专业毕业生自我评价
2014/09/17 职场文书
借名购房协议书范本
2014/10/06 职场文书
2016高中社会实践心得体会范文
2016/01/14 职场文书
小学六一儿童节活动开幕词
2016/03/04 职场文书