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 继承详解(二)
Jul 13 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
Nov 13 Javascript
js 字符串转换成数字的三种方法
Mar 23 Javascript
JS增加行复制行删除行的实现代码
Nov 09 Javascript
JS实现在线统计一个页面内鼠标点击次数的方法
Feb 28 Javascript
使用CoffeeScrip优美方式编写javascript代码
Oct 28 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
May 19 Javascript
浅谈JS的基础类型与引用类型
Sep 13 Javascript
Angularjs 依赖压缩及自定义过滤器写法
Feb 04 Javascript
socket.io与pm2(cluster)集群搭配的解决方案
Jun 02 Javascript
详解node服务器中打开html文件的两种方法
Sep 18 Javascript
jquery实现聊天机器人
Feb 08 jQuery
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
golang与php实现计算两个经纬度之间距离的方法
2016/07/22 PHP
php中__toString()方法用法示例
2016/12/07 PHP
php 删除指定文件夹的实例讲解
2017/07/25 PHP
更优雅的事件触发兼容
2011/10/24 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
JavaScript访问CSS属性的几种方式介绍
2014/07/21 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
2015/04/16 Javascript
js实现字符串和数组之间相互转换操作
2016/01/12 Javascript
Nodejs如何搭建Web服务器
2016/03/28 NodeJs
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
jQuery基于BootStrap样式实现无限极地区联动
2016/08/26 Javascript
node实现简单的反向代理服务器
2017/07/26 Javascript
通过jquery获取上传文件名称、类型和大小的实现代码
2018/04/19 jQuery
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
Angular PWA使用的Demo示例
2019/01/31 Javascript
JQueryDOM之样式操作
2019/03/27 jQuery
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
js面向对象之实现淘宝放大镜
2020/01/15 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
python中合并两个文本文件并按照姓名首字母排序的例子
2014/04/25 Python
Python简单读取json文件功能示例
2017/11/30 Python
Python二进制串转换为通用字符串的方法
2018/07/23 Python
详解python播放音频的三种方法
2019/09/23 Python
Python timer定时器两种常用方法解析
2020/01/20 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
keras topN显示,自编写代码案例
2020/07/03 Python
python代码实现猜拳小游戏
2020/11/30 Python
微信小程序实现可实时改变转速的css3旋转动画实例代码
2018/09/11 HTML / CSS
萌新的HTML5 入门指南
2020/11/06 HTML / CSS
世界上第一个水枕头:Mediflow
2018/12/06 全球购物
Javascript如何发送一个Ajax请求
2015/01/26 面试题
教师工作态度自我评价
2015/03/05 职场文书
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js
golang使用map实现去除重复数组
2022/04/14 Golang