本章内容：
1、为元素绑定事件——bind()方法间接绑定&直接绑定事件
方法一：bind()方法的使用
直接附加事件
2、利用事件对象的目标属性锁定目标元素——event.target()方法
3、自动触发事件——triggert()方法
4、点击之后禁用按钮——unbind()方法
5、处理鼠标事件
响应mouseup事件
6、查明哪个鼠标键被按下——event.button属性的应用
查找鼠标按下时的屏幕坐标——event.screenX & event.screenY
7、动态显示文本——.css({设置CSS样式})
1、为元素绑定事件——bind()方法间接绑定&直接绑定事件
方法一：bind()方法的使用
HTML页面代码（包含jQuery）
|
<!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".bold").bind("click",function(){ //为bold类的HTML元素绑定内联函数作为单击事件处理程序，即单击事件绑定到bold类 alert("你点击了Bold按钮"); $(".italic").bind("click",function(){ alert("你点击了Italic按钮"); }); }); }); </script> </head> <body> <span class="bold buttons">Bold</span> <span class="italic buttons">Italic</span> </body> </html> |
CSS文件代码：
|
.buttons{ width:100px; float:left; text-align:center; margin:5px; border:2px solid; font-weight:bold; } |
（后续的代码示例保持这里的HTML代码和CSS代码）
显示效果：
HTML文件中以下语句：
|
<span class="bold buttons">Bold</span> |
在bold和buttons类的span元素中定义了文本Bold。bold类用于把jQuery代码应用到span元素，而buttons类则把样式表中定义的CSS类buttons的指定样式应用到span元素。
bind()方法：把指定的事件附加到指定的元素。
|
bind(eventType,data,handler) |
evenType：指定事件类型的字符串，如click、double-click、focus、blur；
data：传递到事件处理函数进行处理的数据。如果省略，处理函数作为第二参数；
handler：事件处理函数，包含在指定事件发生时要执行的语句。
以上（jQuery部分）代码也可以写成：
|
$(document).ready(function(){ $(".buttons").bind("click",function(){ alert("你点击了" + $(this).text() + "按钮"); }); }); |
显示效果同上，这里是将单击事件绑定在按钮类上，即同时为两个按钮绑定事件。
直接附加事件
不使用bind()方法也可以把事件直接附加到任何指定的元素。
修改jQuery代码即可：
|
$(document).ready(function(){ $(".buttons").click(function(){ alert("你点击了" + $(this).text() + "按钮"); }); }); |
click()方法把单击事件绑定到指定元素。
|
.click(handler) .click() |
handler是事件处理函数，用鼠标点击指定元素时，就执行该函数所包含的语句。
利用事件对象的目标属性——event.target()方法
jQuery代码
|
$(document).ready(function(){ $(".buttons").click(function(event){ var $target = $(event.target); if($target.is(".bold")){ alert("你点击了Bold按钮"); }else{ alert("你点击了Italic按钮"); } }); }); |
事件对象包含事件细节，JavaScript把事件对象自动发送到事件处理函数。事件对象的其中一个属性称为target(目标)，可以用来查明在哪个元素上发生了事件。以上用target属性用来查明元素的目标（已经发生的单击事件），并存储在变量$target中。然后通过条件语句检查存储的$target变量中的元素是Bold类还是italic类，然后报告消息。
自动触发事件——triggert()方法
有两个按钮Bold和Italic，要求实现自动触发任一按钮上的单击事件，即行为不是用户所为，而是脚本；
前部分的HTML页面和CSS代码不变，修改jQuery代码：
|
$(document).ready(function(){ $(".buttons").bind("click",function(){ alert("你点击了" + $(this).text() + "按钮"); }); $(".italic").trigger("click"); }); |
trigger()方法：调用指定事件类型的事件处理函数（事件类型作为参数传递到此方法）。
trigger(eventType)，eventType是字符串，指定事件的类型，即单击，双击.......该方法返回jQuery对象。当脚本触发事件时，将执行相应的事件处理函数中的代码。这意味着在任何元素上使用trigger()方法之前，需要确认已经为该元素定义了事件处理函数。在以上代码中，把click事件附加到buttons类的元素。即把click事件附加到Bold按钮和Italic按钮上，然后为这两个按钮定义了内联函数作为事件处理函数。再执行$(".italic").trigger("click");触发Italic按钮的click事件，导致它的事件处理函数被调用。
点击之后禁用按钮——unbind()方法
需求：点击表单提交按钮后，希望禁用提交按钮（以避免多次提交）；
修改jQuery代码：
|
$(document).ready(function(){ $(".buttons").bind("click",function(){ alert("你点击了" + $(this).text() + "按钮"); $(".buttons").unbind("click"); }); }); |
代码作用：单击第一次弹出警告显示你所单击的按钮，而后再次单击任何按钮不再显示消息。
unbind()方法用于指定元素中删除某事件类型。jQuery还支持名称空间的事件，这样便可以通过名称空间而触发或取消绑定(unbind)指定组的已绑定处理函数，无需直接引用它们。
unbind()方法从指定的元素中删除先前绑定的事件处理函数：
unbind(eventType,handler)；
unbind(eventType);
unbind();
evnetType：引用不同事件类型，如单击、双击.......附加了指定的eventType的所有事件处理函数将被停止执行。
handler：要删除的事件处理函数，应该与传递到bind()方法的事件处理函数相同。
如果不传递任何参数，所有的事件都被删除。
处理鼠标事件
前面的HTML和CSS代码不做改变。
响应mouseup事件
一旦鼠标指针在元素上并且释放鼠标键，则发生mouseup事件。
|
$(document).ready(function(){ $(".buttons").mouseup(function(){ alert($(this).text() + "按钮发生mouseup事件"); }); }); |
.mouseup(handler) handler是事件发生时执行的内联函数
.mouseup() 用于手动调用mouseup事件
以mouseup事件为例，下面mousedown、mouseover、mouseout等事件都是如此处理；
mousedown：鼠标在指定元素上时按下鼠标键，就触发mousedown事件；
mouseover：一旦鼠标指针进入指定元素的区域，则发生了mousedown事件；
mouseout：鼠标指针离开指定元素，就出发mouseout事件；
查明哪个鼠标键被按下——event.button属性的应用
|
<!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").mousedown(function(event){ if(event.button==0){ alert(event.button); $("p").text("点击了左键"); }else{ alert(event.button); $("p").text("点击了右键"); } }); }); </script> </head> <body> <button>Click Me</button><br/><br/> <p></p> </body> </html> |
在jQuery代码中，把mousedown事件绑定在button元素上，当事件发生时，JavaScript把事件对象发送到事件处理函数。所以一旦在按钮上按下任一鼠标键，事件对象就会自动传递事件到事件处理函数。利用事件对象的button属性来确定哪个鼠标键被按下。对于左鼠标键，event.button==0；有鼠标键，event.button==2；
显示效果：
查找鼠标按下时的屏幕坐标——event.screenX & event.screenY
|
<!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").mousedown(function(event){ $("p").text("鼠标点击位置是横坐标：" + event.screenX + " 纵坐标：" + event.screenY); }); }); </script> </head> <body> <div style="width:100px;height:100px;"></div> <p></p> </body> </html> |
screenX：指定事件发生时相对与屏幕原点的横坐标；
screenY：指定事件发生时相对与屏幕原点的纵坐标；
7、动态显示文本——.css({设置CSS样式})
把按钮形状赋予文本，当鼠标在文本上方移动时，需要突出显示该文本（通过改变文本的前景色和背景色）；
|
<!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").mouseover(function(){ $("p").css({ "background-color":"cyan", "font-weight":"bold", "color":"blue" }); }); $("button").mouseout(function(){ $("p").css({ "background-color":"cyan", "font-weight":"bold", "color":"#acacac" }); }) }); </script> </head> <body> <p>我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本<br/> 我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本<br/> 我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本<br/> 我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本<br/> 我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本<br/> </p> <button>Highlight</button> </body> </html> |
以上代码用了一种技术，即覆盖在样式表中定义的样式属性，并把CSS属性直接应用到指定元素。jQuery提供css()方法，用于把CSS属性直接应用于HTML元素。此方法为指定的元素直接设置CSS样式，覆盖在样式表中定义的样式（如果有）。
|
.css(property,value) |
本例显示效果（左：当鼠标移到button按钮上，右：当鼠标移除button按钮）
示例代码二（用JavaScript实现）：
HTML页面部分：
|
<!DOCTYPE html> <html> <head> <title>javaScript与网页表单交互操作</title> <meta charset="utf-8"> <script type="text/javascript" src = "javaScript-1.js"></script> </head> <body> <div id="infoTab"> <table border="1" cellpadding="5" cellspacing="0" bgColor="#D68E8E" width="100%"> <tr id="infoTr"> <td>姓名</td> <td>年龄</td> <td>学历</td> </tr> <tr id="infoTr"> <td>张三</td> <td>10</td> <td>小学</td> </tr> <tr id="infoTr"> <td>李四</td> <td>12</td> <td>初中</td> </tr> <tr id="infoTr"> <td>王五</td> <td>19</td> <td>大学</td> </tr> </table> </div> </body> </html> |
JavaScript部分：
|
/** *obj：表示当前要改变颜色的对象 *color：设置要显示的颜色 *bgColor：在HTML页面代码已设置的背景颜色 */ function changeColor(obj,color){ obj.bgColor = color; } window.onload = function(){ // var trObj = document.getElementById("infoTr"); 这里的document只能取得第一个‘infoTr’，所有应该采用document.all(ID);它返回对象数组； var trObj = document.all("infoTr"); for (var x = 0 ; x<trObj.length; x++) { trObj[x].addEventListener("mouseover",function () { //this表示当前操作的对象，实际上就是一行 changeColor(this,‘FFFFFF‘); },false); trObj[x].addEventListener("mouseout",function () { changeColor(this,‘D68E8E‘); },false); } } |
当鼠标移入某一行，则改行变色。
显示效果：