编程 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判断浏览器的比较全的代码

Feb 13 Javascript

用jscript实现新建和保存一个word文档

Jun 15 Javascript

JavaScipt基本教程之前言

Jan 16 Javascript

this和执行上下文实现代码

Jul 01 Javascript

jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果

Sep 26 Javascript

js分解url参数（面向对象-极简主义法应用）

Aug 09 Javascript

全面解析Javascript无限添加QQ好友原理

Jun 15 Javascript

require.js 加载 vue组件 r.js 合并压缩的实例

Oct 14 Javascript

angularjs之$timeout指令详解

Jun 13 Javascript

js canvas实现简单的图像扩散效果

Jun 28 Javascript

angular6开发steps步骤条组件

Jul 04 Javascript

vue实现购物车小案例

Sep 27 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