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中检测变量的类型的代码
Dec 28 Javascript
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 Javascript
javascript获得网页窗口实际大小的示例代码
Sep 21 Javascript
window.print打印指定div指定网页指定区域的方法
Aug 04 Javascript
javascript实现获取cookie过期时间的变通方法
Aug 14 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
Nov 07 Javascript
微信小程序开发教程-手势解锁实例
Jan 06 Javascript
js验证手机号、密码、短信验证码代码工具类
Jun 24 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
JavaScript使用ul中li标签实现删除效果
Apr 15 Javascript
vue-router的钩子函数用法实例分析
Oct 26 Javascript
vue-路由精讲 二级路由和三级路由的作用
Aug 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
php面向对象全攻略 (七) 继承性
2009/09/30 PHP
PHP文章采集URL补全函数(FormatUrl)
2012/08/02 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
php版银联支付接口开发简明教程
2016/10/14 PHP
PHPTree――php快速生成无限级分类
2018/03/30 PHP
PHP文件操作实例总结【文件上传、下载、分页】
2018/12/08 PHP
struts2+jquery组合验证注册用户是否存在
2014/04/30 Javascript
Extjs grid panel自带滚动条失效的解决方法
2014/09/11 Javascript
Javascript与jQuery方法的隐藏与显示
2015/01/19 Javascript
js实现图片和链接文字同步切换特效的方法
2015/02/20 Javascript
自定义jQuery插件方式实现强制对象重绘的方法
2015/03/23 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
简介JavaScript中的italics()方法的使用
2015/06/08 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
js实现可键盘控制的简单抽奖程序
2016/07/13 Javascript
node.js文件上传处理示例
2016/10/27 Javascript
详解Javascript中DOM的范围
2017/02/13 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
AngularJS路由Ui-router模块用法示例
2017/05/29 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
在Python中将函数作为另一个函数的参数传入并调用的方法
2019/01/22 Python
Flask模板引擎之Jinja2语法介绍
2019/06/26 Python
python3中eval函数用法使用简介
2019/08/02 Python
Python closure闭包解释及其注意点详解
2019/08/28 Python
python GUI库图形界面开发之PyQt5多线程中信号与槽的详细使用方法与实例
2020/03/08 Python
jupyter修改文件名方式(TensorFlow)
2020/04/21 Python
基于python实现数组格式参数加密计算
2020/04/21 Python
虚拟机下载python是否需要联网
2020/07/27 Python
如何将json数据转换为python数据
2020/09/04 Python
python两种注释用法的示例
2020/10/09 Python
使用HTML5 Canvas API控制字体的显示与渲染的方法
2016/03/24 HTML / CSS
说说你所熟悉或听说过的j2ee中的几种常用模式?及对设计模式的一些看法
2012/05/24 面试题
岗位职责的定义
2013/11/10 职场文书
教师求职推荐信范文
2013/11/20 职场文书
电台编导求职信
2014/05/06 职场文书
zabbix配置nginx监控的实现
2022/05/25 Servers