编程 Javascript

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 相关文章推荐

js模拟实现Array的sort方法

Dec 11 Javascript

js关于字符长度限制的问题示例探讨

Jan 24 Javascript

加载列表时jquery获取ul中第一个li的属性

Nov 02 Javascript

跟我学习javascript的this关键字

May 28 Javascript

关于获取DIV内部内容报错的原因分析及解决办法

Jan 29 Javascript

js阻止默认浏览器行为与冒泡行为的实现代码

May 15 Javascript

JavaScript通过HTML的class来获取HTML元素的方法总结

May 24 Javascript

深入理解(function(){... })();

Aug 16 Javascript

Vue.js列表渲染绑定jQuery插件的正确姿势

Jun 29 jQuery

BootStrap导航栏问题记录

Jul 31 Javascript

JS脚本加载后执行相应回调函数的操作方法

Feb 28 Javascript

JavaScript实现创建自定义对象的常用方式总结

Jul 09 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中cookie的作用域

2008/03/27 PHP

php读取javascript设置的cookies的代码

2010/04/12 PHP

thinkphp微信开之安全模式消息加密解密不成功的解决办法

2015/12/02 PHP

PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间

2016/05/06 PHP

javascript实现划词标记+划词搜索功能

2007/03/06 Javascript

jQuery.validate 常用方法及需要注意的问题

2013/03/20 Javascript

Jquery 切换不同图片示例代码

2013/12/05 Javascript

nodejs实现黑名单中间件设计

2014/06/17 NodeJs

JS+CSS实现Li列表隔行换色效果的方法

2015/02/16 Javascript

JavaScript控制按钮可用或不可用的方法

2015/04/03 Javascript

jQuery实现高亮显示网页关键词的方法

2015/08/07 Javascript

Javascript日期格式化format函数的使用方法

2016/08/30 Javascript

jQuery实现的超链接提示效果示例【附demo源码下载】

2016/09/09 Javascript

jquery动态添加文本并获取值的方法

2016/10/12 Javascript

javaScript嗅探执行神器-sniffer.js

2017/02/14 Javascript

js实现简单的选项卡效果

2017/02/23 Javascript

js实现单张图片平移切换效果

2017/10/11 Javascript

Vuex的初探与实战小结

2018/11/26 Javascript

Django+vue跨域问题解决的详细步骤

2019/01/20 Javascript

Vue使用Three.js加载glTF模型的方法详解

2020/06/14 Javascript

解决vant的Toast组件时提示not defined的问题

2020/11/11 Javascript

python3序列化与反序列化用法实例

2015/05/26 Python

Python迭代器和生成器定义与用法示例

2018/02/10 Python

python实现在图片上画特定大小角度矩形框

2018/10/24 Python

使用Rasterio读取栅格数据的实例讲解

2019/11/26 Python

tensorflow没有output结点,存储成pb文件的例子

2020/01/04 Python

jupyter notebook参数化运行python方式

2020/04/10 Python

python使用OpenCV模块实现图像的融合示例代码

2020/04/10 Python

美国高端牛仔品牌：Silver Jeans

2019/12/12 全球购物

北大自主招生自荐信

2013/10/19 职场文书

会展策划与管理专业大学生职业生涯规划

2014/02/07 职场文书

五四青年节优秀演讲稿范文

2014/05/28 职场文书

大一新生期末自我评价

2014/09/12 职场文书

商务司机岗位职责

2015/04/10 职场文书

2015年营业员工作总结

2015/04/23 职场文书

2016大学生形势与政策心得体会

2016/01/12 职场文书