WEB入门之十四 jQuery事件

Posted tea_year

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了WEB入门之十四 jQuery事件相关的知识，希望对你有一定的参考价值。

学习内容

? jQuery各种事件

? jQuery事件绑定

能力目标

? 能熟练使用jQuery各种事件

? 能熟练绑定jQuery事件

 


本章简介

javascript是事件驱动型的编程语言，即JavaScript和html之间的交互是通过用户和浏览器操作页面时触发的事件来驱动进行的。使用传统的JavaScript就能处理这些交互，但是jQuery增加并扩展了JavaScript事件处理机制，使其使用起来更加优雅和灵活。本章我们重点讲解jQuery中的各种事件以及事件的绑定。

核心技能部分

5.1 jQuery事件

jQuery事件是使用面向对象的思想对JavaScript事件做了进一步封装，使用起来更加优雅和灵活，各种事件及其作用如表5-1-1所示。

表5-1-1 jQuery事件

jQuery事件

说明

ready( fn )

页面加载完毕时发生的事件

blur( [ [data] , fn ] )

元素失去焦点时发生的事件

change( [ [data] , fn ] )

元素的值发生改变时发生的事件

click( [ [data] , fn ] )

单击鼠标时发生的事件

dblclick( [ [data] , fn ] )

双击鼠标时发生的事件

focus( [ [data] , fn ] )

元素获得焦点是发生的事件

keydown( [ [data] , fn ] )

按下键盘时发生的事件

keyup( [ [data] , fn ] )

松开键盘时发生的事件

keypress( [ [data] , fn ] )

按下并松开键盘时发生的事件

mousedown( [ [data] , fn ] )

按下鼠标按钮时发生的事件

mousemove( [ [data] , fn ] )

鼠标移动时发生的事件

mouseout( [ [data] , fn ] )

鼠标离开某元素时发生的事件

mouseover( [ [data] , fn ] )

鼠标悬浮到某元素上时发生的事件

mouseup( [ [data] , fn ] )

松开鼠标按钮时发生的事件

scroll( [ [data] , fn ] )

页面滚动时发生的事件

select( [ [data] , fn ] )

input元素的选取事件

submit( [ [data] , fn ] )

表单提交事件

unload( [ [data] , fn ] )

页面卸载时发生的事件

参数fn表示事件发生时要绑定的匿名函数，参数data表示要传入到匿名函数的值。

5.1.1 页面载入\卸载事件

$(document).ready()是jQuery事件机制中最重要、最基础的一个事件，它用来代替传统DOM中的window.onload事件。$(document).ready()能极大提高Web应用程序的响应速度。

1.执行时机

$(document).ready()和window.onload虽然很相似，但是它们在执行时机方面是有区别的。window.onload是在网页中所有的元素（包括相关联的文件）完全加载到浏览器后才触发；$(document).ready()是在页面的DOM结构加载完毕就触发，并不是等着网页中所有的元素（包括相关联的文件）完全加载到浏览器后才触发。

$(document).ready()的具体语法如下所示：

$(document).ready(

   function()

   {

     //代码

   }

)

下面我们通过一个示例来演示$(document).ready()的用法，参考代码如下所示。

示例5.1

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>示例5.1</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
$(document).ready()和window.onload虽然很相似，但是它们在执行时机方面是有区别的。window.onload是在网页中所有的元素（包括相关联的文件）完全加载到浏览器后才触发；$(document).ready()是在页面的DOM结构加载完毕就触发，并不是等着网页中所有的元素（包括相关联的文件）完全加载到浏览器后才触发。
</body>
</html>
<script>
$(document).ready(
function()
{
alert("I Love jQuery");
}
)
</script>


当使用浏览器打开示例5.1时会弹出一个对话框

2.多次使用

如果我们要在页面加载完毕时执行两个函数，通常会像示例5.2这样写，代码如下所示。

示例5.2

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>示例5.2</title>
</head>
<body>
$(document).ready()和window.onload虽然很相似，但是它们在执行时机方面是有区别的。window.onload是在网页中所有的元素（包括相关联的文件）完全加载到浏览器后才触发；$(document).ready()是在页面的DOM结构加载完毕就触发，并不是等着网页中所有的元素（包括相关联的文件）完全加载到浏览器后才触发。
</body>
</html>
<script>
function test1()
{
document.write("onload事件1");
}
function test2()
{
document.write("onload事件2");
}
window.onload=test1;
window.onload=test2;
</script>


上述代码给onload事件绑定了两个函数

我们发现只有test2函数执行了，这是因为DOM事件一次只能绑定一个函数。如果进行多次绑定，那么后面的绑定会覆盖前面的绑定。其实这个问题很好解决，我们看下面的代码。

示例5.3

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>示例5.3</title>
</head>
<body>
$(document).ready()和window.onload虽然很相似，但是它们在执行时机方面是有区别的。window.onload是在网页中所有的元素（包括相关联的文件）完全加载到浏览器后才触发；$(document).ready()是在页面的DOM结构加载完毕就触发，并不是等着网页中所有的元素（包括相关联的文件）完全加载到浏览器后才触发。
</body>
</html>
<script>
function test1()
{
document.write("onload事件1");
}
function test2()
{
document.write("onload事件2");
}
function test()
{
test1();
test2();
}
window.onload=test;
</script>


在上述代码中，把页面加载完毕时需要调用的两个函数放到第三个函数test中调用，然后给onload事件绑定test函数即可

虽然示例5.3把问题解决了，但是在某些情况下仍然不能满足需求，例如，如果脚本代码分布在多个外部js文件中，而每个js文件都需要使用onload事件，这种情况下使用示例5.3的方法会很难处理。jQuery中的ready()事件则可以很好的处理这个问题，每次给ready()事件绑定函数都会进行追加，而不是覆盖，例如下面的代码。

示例5.4

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>示例5.4</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
$(document).ready()和window.onload虽然很相似，但是它们在执行时机方面是有区别的。window.onload是在网页中所有的元素（包括相关联的文件）完全加载到浏览器后才触发；$(document).ready()是在页面的DOM结构加载完毕就触发，并不是等着网页中所有的元素（包括相关联的文件）完全加载到浏览器后才触发。
</body>
</html>
<script>
function test1()
{
document.write("onload事件1");
}
function test2()
{
document.write("onload事件2");
}
$(document).ready(
function()
{
test1();
test2();
}
)
</script>


上述代码在ready()事件中绑定了两个函数，这两个函数都正常执行，而不是第二个函数覆盖第一个函数

3.简写形式

由于ready()事件使用频繁，jQuery提供了一种简写方式。下面我们使用简写方式重新实现示例5.5，代码如下所示。

示例5.5

<script>
function test1()
{
document.write("onload事件1");
}
function test2()
{
document.write("onload事件2");
}
$(
function()
{
test1();
test2();
}
)
</script>


通过示例5.5可以看到，$(document).ready( )的简写方式是$( )。

4.页面卸载事件unload

当用户关闭某个页面时，浏览器会卸载此页面，此时发生的就是unload事件。示例5.6演示在该事件发生时弹出一个对话框。

示例5.6

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>示例5.6</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<h3>当用户关闭某个页面时，浏览器会卸载此页面，此时发生的就是unload事件。</h3>
</body>
</html>
<script>
$(window).unload(
function()
{
alert("欢迎下次光临");
return false;
}
)
</script>


5.1.2 鼠标相关事件

jQuery中跟鼠标相关的事件有5个，详见表5-1-2所示。

表5-1-2  jQuery鼠标事件

鼠标事件

说明

mousedown( [ [data] , fn ] )

按下鼠标按钮时发生的事件

mousemove( [ [data] , fn ] )

鼠标移动时发生的事件

mouseout( [ [data] , fn ] )

鼠标离开某元素时发生的事件

mouseover( [ [data] , fn ] )

鼠标悬浮到某元素上时发生的事件

mouseup( [ [data] , fn ] )

松开鼠标按钮时发生的事件

下面我们通过一些示例来演示jQuery中鼠标相关事件的用法，先看示例5.7，该示例演示了mousedown、mouseup和mousemove事件，代码如下所示。

示例5.7

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例5.7</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<div id="begin"></div>
<div id="now"></div>
<div id="end"></div>
</body>
</html>
<script>
$(document).mousedown(
function(e)
{
$("#begin").html("起始位置:"+e.pageX+","+e.pageY);
}
)
$(document).mousemove(
function(e)
{
$("#now").html("当前位置:"+e.pageX+","+e.pageY);
}
)
$(document).mouseup(
function(e)
{
$("#end").html("结束位置:"+e.pageX+","+e.pageY);
}
)
</script>


上述代码的运行效果如图5.1.5所示。当按下鼠标左键时记录鼠标位置作为起始位置；当鼠标移动时一直记录鼠标的当前位置；当松开鼠标左键时记录鼠标位置作为结束位置。参数e是传递过来的事件对象，相当于DOM中的event对象，jQuery对该对象进行了进一步封装，pageX和pageY用了获取事件发生的位置，jQuery事件对象会在下面进行详细介绍。

 

图5.1.5  运行效果

5.1.3 键盘相关事件

jQuery中跟键盘相关的事件有3个，详见表5-1-3所示。

表5-1-3  jQuery键盘事件

jQuery键盘事件

说明

keydown( [ [data] , fn ] )

按下键盘时发生的事件

keyup( [ [data] , fn ] )

松开键盘时发生的事件

keypress( [ [data] , fn ] )

跟keydown差不多，也是按下键盘时发生的事件

jQuery中的键盘事件跟DOM中的差不多，示例5.8是keypress事件的具体用法，参考代码如下所示。

示例5.8

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例5.8</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<input type="text" id="word"/>
<div id="copy"></div>
</body>
</html>
<script>
$("#word").keypress(
function()
{
$("#copy").html($("#word").val());
}
)
</script>


该示例的运行效果，当用户通过键盘在文本框中输入数据时会触发可以press事件，然后程序把文本框中的内容复制到下面的div中。

 


5.1.4 焦点相关事件

jQuery中跟焦点相关的事件有2个，跟DOM中的焦点事件差不多，详见表5-1-4所示。

表5-1-4 焦点相关事件

焦点相关事件

说明

blur( [ [data] , fn ] )

元素失去焦点时发生的事件

focus( [ [data] , fn ] )

元素获得焦点时发生的事件

下面我们通过一个示例来演示jQuery中焦点事件的用法，参考代码如下所示。

示例5.9

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>示例5.9</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<form method="post">
  <p>
    登录名称：
    <input type="text" id="uname"/>
  </p>
  <p>
    登录密码：
    <input type="password" id="upwd" />
  </p>
  <p>
    <input type="submit" value="提交" />
  </p>
</form>
</body>
</html>
<script>
$("input:lt(2)").each(
function()
{
  $(this).focus(
  function()
  {
  if($(this).val()!="")
  $($(this)).select();
  }
  );
  $(this).blur(
  function()
  {
  if($(this).val()=="")
  alert("所有项都必须填写");
  }
  );
}
)
</script>


在上述代码中，我们给文本框和密码框的获得/失去焦点事件绑定了函数

5.1.5 其他相关事件

除了上面的事件外，jQuery中还有一些其他的常用事件，详见表5-1-5所示。

表5-1-5  jQuery其他事件

其他事件

说明

change( [ [data] , fn ] )

元素的值发生改变时发生的事件

select( [ [data] , fn ] )

input元素的选取事件

submit( [ [data] , fn ] )

表单提交事件

下面我们通过一个示例来演示change和select事件的用法，参考代码如下所示。

示例5.10

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例5.10</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<textarea cols="80" rows="20" id="dm"></textarea><br/>
<input value="复制代码" type="button" disabled="false" id="btn">
分享到：
<select id="fx">
<option value="0">请选择</option>
<option value="腾讯博客">腾讯博客</option>
<option value="QQ空间">QQ空间</option>
</select>
<div id="content"></div>
</body>
</html>
<script>
$("#dm").select(
function()
{
$("#btn").get(0).disabled=false;
}
)
$("#fx").change(
function()
{
if($(this).val()!="0")
$("#content").html("你要把这段代码分享到"+$("#fx").val());
else
$("#content").html("");
}
)
</script>


上述代码模拟把一段代码分享到个人博客或空间中，用到了change和select事件。只有选中文本区域中的代码时，按钮才会启用

5.2 事件对象

evnet是前面我们在编写JavaScript代码时经常用到的对象之一，它表示事件对象，封装了跟事件相关的一些数据，例如事件源、事件类型等。jQuery在遵循W3C规范的情况下，对event对象做了进一步封装，使得该对象在各大浏览器下都可以正常运行。

在jQuery中，事件对象通常作为匿名函数的参数使用，语法如下所示：

jQuery对象 . 事件(

function ( e ) {    //参数e就表示事件对象

alert( e.type );

}

)

jQuery中事件对象的常用属性见表5-1-6所示。

属性

说明

type

获取事件类型

target

获取触发事件的元素

result

获取上一个事件处理函数返回的值

which

获取在鼠标单击事件中获取鼠标的按键，值1表示鼠标左键；值2表示鼠标中键；值3表示鼠标右键

pageX/Y

获取事件发生时相对于页面的坐标

keyCode

获取在键盘事件中键盘对应的键值

screenX/Y

获取事件发生时相对于屏幕的坐标

data

事件发生时传递的参数的信息都保持在该属性中

下面通过一个示例来演示jQuery中事件对象的用法，参考代码如下所示。

示例5.11

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例5.11</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<input type="button" id="btn" value="test"/>
<div id="content"></div>
<div id="position"></div>
</body>
</html>
<script>
$("#btn").click(
function(e)
{
var str="事件发生的类型是："+e.type+"，事件发生的对象是："+e.target.type;
if(e.which==1)
str=str+"，单击的是鼠标左键";
$("#content").html(str);
}
)
$(window).mousemove(
function(e)
{
$("#position").html(e.pageX+","+e.pageY);
}
)
</script>


上述代码包含了鼠标单击事件和鼠标移动事件，并在这些事件中通过事件对象的属性获取到了跟事件相关的数据

5.3 jQuery合成事件

jQuery中有两个合成事件：hover和toggle，这两个是DOM中不存在的事件，都属于jQuery自定义的事件。

5.3.1 hover事件

该事件用来模拟鼠标悬停事件，当鼠标移到元素上时会触发第1个函数的执行；当鼠标移出这个元素时会触发第2个函数的执行。语法如下所示：

jQuery对象 . hover ( fn1 , fn2 )

下面我们通过一个示例来演示该事件的用法。

示例5.12

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>示例5.12</title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="panel">
<h5 id="head" class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(
$("#head").hover(function(){
$(".content").show();
},function(){
    $(".content").hide();   
})
)
</script>


当页面装载完毕时，会给id是head的div元素设置hover事件，在该事件中通过两个匿名函数控制类名是content的div，第一个函数控制该div显示，第二个函数控制该div隐藏。show()是jQuery内置的函数，用来控制元素显示，相当于display=block；hide()也是jQuery内置的函数，用来控制元素隐藏，相当于display=none。该示例的运行效果如图5.1.10所示，当鼠标悬浮到绿色的标题上时，下面的内容就会显示出来；当鼠标离开绿色的标题时，下面的内容就会隐藏起来。

 

图5.1.10  hover事件

5.3.2 toggle事件

该事件用于模拟鼠标的连续单击事件，第1次单击时触发第1个函数的执行；第2次单击时触发第2个函数的执行；第n次单击时触发第n个函数的执行。语法如下所示：

jQuery选择器 . toggle ( fn1 , fn2 , fn3 , ... ... )

下面我们通过一个示例来演示该事件的用法。

示例5.13

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>示例5.13</title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<style type="text/css">
.highlight{ background:#FF3300; }
</style>
<script type="text/javascript">
$(function(){
    $("#head").toggle(function(){
$(".content").show();
},function(){
$(".content").hide();
});
})
</script>
</head>
<body>
<div id="panel">
<h5 id="head" class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div>
</div>
</body>
</html>


该示例与5.12差不多，只是由hover事件换成了toggle事件，当鼠标单击绿色的标题时，下面的内容就会显示出来；当鼠标再次单击绿色的标题时，下面的内容就会隐藏起来，依次循环

 


5.4 jQuery事件绑定

jQuery提供了诸多函数来处理复杂的事件，例如动态绑定事件，或者一个元素同时绑定多个事件处理函数，或者多个元素同时共用一个事件处理函数等。jQuery常用绑定函数见表5-1-7所示。

表5-1-7  jQuery常用绑定函数

函数名

说明

bind

为某元素动态绑定事件及处理函数

unbind

移除某元素的事件，与bind相反

live

相当于增强的bind函数，详见下面介绍

die

删除通过live绑定的事件，与live相反

on

jQuery1.7版本中新增的事件绑定函数，用来逐步替代bind和live，性能更好

off

用来移除某元素的事件，与on相反

下面我们通过一些示例来演示上述函数的用法。

5.4.1 bind和unbind

bind是从jQuery 1.0版本就出现的事件绑定函数，具体语法如下所示。

jQuery对象 . bind ( type , [data] , fn )

参数说明：

type：表示事件类型

data：该参数可选，表示事件发生时通过event对象传递的值

fn：表示事件发生时的处理函数

下面我们实现一个通过焦点事件改变文本框背景颜色的示例，首先用以前的普通方式实现，参考代码如下所示。

示例5.14

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例5.14</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<table width="35%" height="160" border="0" align="center">
  <tr>
    <td height="32" colspan="2" align="center">用户登录</td>
    </tr>
  <tr>
    <td width="29%" height="36">登录名称：</td>
    <td width="71%"><input class="txt" type="text"/></td>
  </tr>
  <tr>
    <td height="38">登录密码：</td>
    <td><input class="txt" name="textfield2" /></td>
  </tr>
  <tr>
    <td colspan="2" align="center"><input type="submit" id="btn" value="登录" /></td>
    </tr>
</table>
</body>
</html>
<script>
$(".txt").focus(      //给文本框绑定获取焦点事件
function(){
$(this).get(0).style.backgroundColor="pink";
}
)
$(".txt").blur(      //给文本框绑定失去焦点事件
function(){
$(this).get(0).style.backgroundColor="white";
}
)
</script>


上述代码通过以前的普通方式给文本框分别绑定了失去焦点和获得焦点的事件，并在事件中改变了文本框的背景色

示例5.15

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例5.15</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<table width="35%" height="160" border="0" align="center">
  <tr>
    <td height="32" colspan="2" align="center">用户登录</td>
    </tr>
  <tr>
    <td width="29%" height="36">登录名称：</td>
    <td width="71%"><input class="txt" type="text"/></td>
  </tr>
  <tr>
    <td height="38">登录密码：</td>
    <td><input class="txt" name="textfield2" /></td>
  </tr>
  <tr>
    <td colspan="2" align="center"><input type="submit" id="btn" value="登录" /></td>
    </tr>
</table>
</body>
</html>
<script>
$(".txt").bind("focus blur",function(){
if($(this).get(0).style.backgroundColor=="pink")
$(this).get(0).style.backgroundColor="white";
else
$(this).get(0).style.backgroundColor="pink";
}
)
</script>


上述代码使用bind函数给文本框同时绑定了获得/失去焦点事件，并在函数中改变了文本框的背景色。bind函数可以同时给某元素绑定多个事件，示例5.15是其中一种写法，还有一种写法如下所示。

jQuery对象 . bind (

      {

事件名 :  fn() { },

事件名 :  fn() { },

            ...  ...

  }

 )

下面我们使用这种写法重新实现示例5.15，参考代码如下所示。

示例5.16

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例5.16</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<table width="35%" height="160" border="0" align="center">
  <tr>
    <td height="32" colspan="2" align="center">用户登录</td>
    </tr>
  <tr>
    <td width="29%" height="36">登录名称：</td>
    <td width="71%"><input class="txt" type="text"/></td>
  </tr>
  <tr>
    <td height="38">登录密码：</td>
    <td><input class="txt" name="textfield2" /></td>
  </tr>
  <tr>
    <td colspan="2" align="center"><input type="submit" id="btn" value="登录" /></td>
    </tr>
</table>
</body>
</html>
<script>
$(".txt").bind(
{
focus:function(){
$(this).get(0).style.backgroundColor="pink"
},
blur:function(){
$(this).get(0).style.backgroundColor="white"
},
}
)
</script>


如果多个事件中要处理的业务比较相似，可以使用示例5.15的写法，如果多个事件中药处理的业务大相径庭，则比较适合使用示例5.16的写法。

unbind与bind相反，用来移除某元素绑定的事件，具体语法如下所示：

jQuery对象 . unbind ( [ type ] , [ fn ] )

参数说明：

type：可选参数，表示事件类型

fn：可选参数，表示函数名

unbind函数常见的用法如下所示：

1. 无参，表示移除元素上绑定的所有事件

$("p").unbind();   //移除段落元素的所有事件

2. 一个参数，表示移除元素上指定的某个事件

$("p").unbind("click");    //移除段落元素的鼠标单击事件

5.4.2 live和die

live的作用及用法跟bind差不多，但它进行了功能上的增强。假设给所有的文本框通过bind绑定了鼠标单击事件，然后再动态创建一个文本框，此时绑定的鼠标单击事件对这个新创建的文本框无效；但是如果使用live进行绑定，那么新创建的文本框也会绑定鼠标单击事件。

下面我们实现一个表格中的行在鼠标单击时改变背景色的示例，首先通过bind实现，参考代码如下所示。

示例5.17

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例5.17</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
<table width="58%" height="38" border="1" align="center" id="t">
  <tr>
    <td><div align="center">商品名称</div></td>
    <td><div align="center">商品售价</div></td>
    <td><div align="center">产地</div></td>
    <td><div align="center">删除</div></td>
  </tr>
</table>
<p align="center">添加商品
<form>
  <p align="center">商品名称：
    <input type="text" id="pname" />
  </p>
  <p align="center">商品售价：
    <input type="text" id="price" />
  </p>
  <p align="center">商品产地：
    <input type="text" id="paddress" />
  </p>
  <p align="center">
    <input type="button" id="btn" value="添加商品"/>
</p>
</form>
</body>
</html>
<script>
$("#btn").click(
function(){
var newRow=document.getElementById("t").insertRow();
newRow.style.textAlign="center";
var c1=newRow.insertCell();
c1.innerText=$("#pname").val();
var c2=newRow.insertCell();
c2.innerText=$("#price").val();
var c3=newRow.insertCell();
c3.innerText=$("#paddress").val();
var c4=newRow.insertCell();
c4.innerHTML="<a href=‘#‘>删除</a>";
}
)
$("tr").bind("click",function(){
$("tr").each(
function(){
$(this).get(0).style.backgroundColor="white";
}
);
$(this).get(0).style.backgroundColor="silver";
}
)
</script>


在上述代码中，我们给按钮绑定了鼠标单击事件，在该事件中主要实现动态生成行和单元格并添加到表中，同时给所有的行绑定了鼠标单击事件，用来实现背景色的改变。

 


添加过两个商品后，表格中一共有3行数据，第1行是原本存在的，后两行是动态创建并添加到表格上的。现在单击表格中的行，我们会发现只有第1行的背景色可以改变，后两行的背景色没有改变。这说明对于动态创建的元素，bind是无能为力的。但是如果把示例5.17中的bind换成live，这个问题就解决了。

 


把bind换成live后，表格中的任何一行在单击时都可以改变背景色，包括动态创建的行。

die函数跟前面的unbind类似，用来移除某元素上绑定的事件，具体语法如下所示：

jQuery对象 . die ( [ type ] , [ fn ] )

参数说明：

type：可选参数，表示事件类型

fn：可选参数，表示函数名

die函数常见的用法如下所示：

1. 无参，表示移除元素上绑定的所有事件

$("p").die();   //移除段落元素的所有事件

2. 一个参数，表示移除元素上指定的某个事件

$("p").die("click");    //移除段落元素的鼠标单击事件

2. 一次移除多个事件，中间用空格隔开

$("p").die("click mouseover");    //移除段落元素的鼠标单击事件和鼠标悬浮事件

5.4.3 on和off

on是jQuery 1.7版本中新增的函数，用来逐步取代旧的bind和live函数，运行速度和质量更加优秀，具体语法如下所示：

jQuery对象 . on ( events , [data] , fn )

参数说明：

events：表示事件类型，多个事件用空格隔开

data：该参数可选，表示事件发生时通过event对象传递的值

fn：表示事件发生时的处理函数

下面我们通过一个示例来演示on函数的用法，该示例让用户输入自己的身份证号，然后单击按钮时分析出用户的出生日期。

示例5.18

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例5.18</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
身份证号：<input id="txt" type="text" />
<input type="submit" id="btn" value="分析"/>
</body>
</html>
<script>
$("#btn").on("click",{sfz:$("#txt").val()},function(e)
{
if(e.data.sfz=="")
alert("身份证号不能为空！");
else
{
var y=e.data.sfz.substr(6,4);
var m=e.data.sfz.substr(10,2);
var d=e.data.sfz.substr(12,2);
alert("出生日期是："+y+"年"+m+"月"+d+"日");
}
}
)
</script>


在上述代码中，我们使用on函数给按钮绑定了单击事件，并在该事件中通过传参的形式把文本框的值传给处理函数。前面讲解事件对象event时提到了该对象的data属性，该属性就是用来传参的，具体语法如下所示：

jQuery对象 .  on ( "事件名" , { 参数名 : 参数值 } , function ( e )

{

alert（e.data.参数名）;      // 获得参数的值

}

)


off函数跟on函数相反，用来移除某元素上绑定的事件，该函数常见的用法如下所示：

1. 无参，表示移除元素上绑定的所有事件

$("p").off();   //移除段落元素的所有事件

2. 一个参数，表示移除元素上指定的某个事件

$("p").off("click");    //移除段落元素的鼠标单击事件

2. 一次移除多个事件，中间用空格隔开

$("p").off("click mouseover");    //移除段落元素的鼠标单击事件和鼠标悬浮事件

5.5 模拟触发事件

大多数时候，事件都是由用户通过操作鼠标和键盘来触发的，但是也有一些情况需要通过代码来触发事件，这称之为模拟触发事件。

实现模拟触发事件的方式有两种：

1. jQuery对象.事件名()

2. jQuery对象.trigger( 事件名 )

下面我们把示例5.18由用户人工触发事件改为代码模拟触发事件，参考代码如下所示：

示例5.19

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>示例5.19</title>
<script src="jquery-1.7.2.min.js"></script>
</head>
<body>
身份证号：<input id="txt" type="text" value="410182198410254910"/>
<input type="submit" id="btn" value="分析" />
</body>
</html>
<script>
$("#btn").on("click",{sfz:$("#txt").val()},function(e)
{
if(e.data.sfz=="")
alert("身份证号不能为空！");
else
{
var y=e.data.sfz.substr(6,4);
var m=e.data.sfz.substr(10,2);
var d=e.data.sfz.substr(12,2);
alert("出生日期是："+y+"年"+m+"月"+d+"日");
}
}
)
$("#btn").click();
$("#btn").trigger("click");
</script>


上述代码分别使用两种方式通过代码模拟触发按钮的鼠标单击事件，因此页面一打开，在用户没有进行任何操作的情况下就会先后弹出两个对话框。

trigger是jQuery提供的一个函数，用来模拟触发事件，并且可以传递参数，具体语法如下所示：

jQuery对象 . trigger ( "事件名" , [ "参数名" , "参数值" ] );

本章总结

本章主要学习jQuery事件，例如鼠标相关事件、键盘相关事件、焦点相关事件等，这些事件都是jQuery在DOM事件上进行了简单的封装。另外，jQuery还提供了更高级的合成事件、事件绑定等，这些会给编程带来更大的便利和功能的增强。

 

 

 

 

 


任务实训部分

1：实现简易计算器

训练技能点

? jQuery单击事件

  需求说明

使用jQuery事件实现计算器功能。

 


2：实现横向菜单

训练技能点

? jQuery鼠标悬浮/离开事件

  需求说明

使用jQuery鼠标悬浮/离开事件实现横向菜单。

 

实现步骤

（1）实现图5.2.2所示的界面

（2）给一级菜单设置hover事件实现二级子菜单的显示和隐藏，参考代码如下所示。

<HTML>

<HEAD>

<META http-equiv="Content-Type" content="text/html; charset=gb2312">

<TITLE>横向菜单</TITLE>

<script src="jquery-1.7.2.min.js"></script>

<STYLE type="text/css">

td {

FONT-SIZE: 13px; COLOR: #000000; LINE-HEIGHT: 22px;

}

div{/*设置层背景样式*/

background-color:#669933;

text-align:center;position:absolute;z-index:2;display:none; }

A {FONT-SIZE: 13px; COLOR: #000000; TEXT-DECORATION: none;

/*文字链接的背影样式*/

background-color:#dfdfdf;

width:100px;line-height:22px;text-align:center;border-bottom:1 #FFFFFF solid;}

A:hover {FONT-SIZE: 13px; COLOR: #FFFFFF;

/*鼠标在文字链接上时的文字背景样式*/

background-color:#cc0000;

width:100px;line-height:22px;text-align:center;}

</STYLE>

</HEAD>

<BODY>

<TABLE width="610" border="0" cellspacing="0" cellpadding="0" align="center">

<TR>

    <TD><A href="#" id="s1" class="p">关于中信</A></TD>

    <TD><A href="#" id="s2" class="p">公司业务</A></TD>

    <TD><A href="#" id="s3" class="p">公益事业</A></TD>

<TD><A href="#" id="s4" class="p">中信研究</A></TD>

    <TD><A href="#" id="s5" class="p">推荐招聘</A></TD>

    <TD><A href="#" id="s6" class="p">特色推荐</A></TD>

 </TR>

  <TR>

    <TD><DIV id="s11"><A href="#">公司简介</A><BR><A href="#">集团领导</A><BR>

<A href="#">领导题词</A><BR><A href="#">业务回顾</A><BR><A href="#">公司历史</A>

<BR><A href="#">中信风格</A><BR><A href="#">公司年报</A><BR><A href="#">公司要闻</A></DIV></TD>

    <TD><DIV id="s21"><A href="#">金融</A><BR><A href="#">非金融</A></DIV></TD>

    <TD><DIV id="s31"><A href="#">扶贫</A><BR><A href="#">绿化</A><BR><A href="#">援藏</A></DIV></TD>

 <TD><DIV id="s41"></DIV></TD>

    <TD><DIV id="s51"></DIV></TD>

    <TD><DIV id="s61"><A href="#">网络金融</A><BR><A href="#">中信出版</A><BR><A href="#">会展服务</A></DIV></TD>

  </TR>

</TABLE>

</BODY>

</HTML>

<SCRIPT>

$(".p").hover(

function(){

$("#"+$(this).get(0).id+"1").get(0).style.display="block";

},

function(){

$("#"+$(this).get(0).id+"1").get(0).style.display="none";

}

)

</SCRIPT>

3：漂浮的鱼

训练技能点

? jQuery键盘事件

  需求说明

按照图5.2.3所示的界面使用jQuery键盘事件实现漂浮的鱼。图中较小的鱼是单独一张图片，后面的是背景图片。用户通过按下键盘上的↑↓→ ←键控制鱼的移动。

 


4：种族选择

训练技能点

? jQuery change事件

  需求说明

使用jQuery change事件实现种族选择。选择下拉列表框中不同的项，就显示不同的图片。

 


实现步骤

（1） 实现图5.2.4所示的界面，默认不显示任何图片

（2） 给下拉列表框设置change事件，并实现选择下拉列表框中不同的项，就显示不同的图片，参考代码如下所示。

<body>

  <select id="zz">

   <option value="0">--请选择--</option>

    <option value="dwarves-small.jpg">矮人</option>

    <option value="nightelves-small.jpg">暗夜精灵</option>

    <option value="gnomes-small.jpg">侏儒</option>

  </select>

  <br/>

 <div id="ad"></div>

</body>

</html>

<script>

$("#zz").change(

function(){

var img=$(this).get(0).value;

if(img=="0")

$("#ad").get(0).innerHTML="";

else

$("#ad").get(0).innerHTML="<img src=‘"+img+"‘/>";

}

)

</script>


巩固练习

一、选择题

1. 以下关于jQuery事件的说法错误的是（）。

A. jQuery事件和DOM事件一样

B. jQuery对DOM事件进行了面向对象的封装

C. jQuery扩充了DOM事件，例如hover、toggle

D. jQuery中的event对象和DOM中的event对象不一样

2. 以下属于jQuery中event对象的属性的是（）。

A. which

B. button

C. srcElement

D. target

3. 以下（）不属于jQuery事件。

A. onclick

B. change

C. submit

D. ready

4. 下列（）不属于jQuery事件绑定。

A. on

B. live

C. bind

D. hover

 

 

 

 

二、上机练习

 使用jQuery鼠标事件实现拖拽图片。

以上是关于WEB入门之十四 jQuery事件的主要内容，如果未能解决你的问题，请参考以下文章

PX4模块设计之十四：Event设计

OpenCV入门教程之十四OpenCV霍夫变换：霍夫线变换，霍夫圆变换合辑

nginx之十四：优化指南

BetaFlight模块设计之十四：高度计算任务分析

Java进阶篇 设计模式之十四 ----- 总结篇

struts2学习笔记之十四:使用注解配置Action(不是和spring集成使用)