jQuery事件处理及实现函数详解编程语言

1、页面载入完毕响应的事件
jQuery中的$(documnet).ready()事件
这个事件是window.onload()注册事件的替代方法，比window.onload()方法更加易用也更加实用，可以
在DOM载入就绪能够读取并操作时立即调用所绑定的函数，几乎所有的JavaScript都需要在那一刻执行。
ready(fn); 当DOM载入就绪可以查询及操作时绑定一个要执行的函数
$(document).ready(function())的缩写形式：
jQuery(function ($){
/*可以在这里继续使用$作为别名*/
})；
另一种缩写形式如下：
$(function(){
/*在这里添加你的jQuey处理代码*/
});

2、绑定与反绑定事件监听器
jQuery可以对事件进行多次绑定或者一次性绑定，甚至可以设置反绑定
绑定事件
使用绑定函数bind(type,[data],fn),其中事件类型和处理函数为必选参数
为每一个匹配元素的特定事件(像click)绑定一个事件处理器函数
$(“#firstname”).bind(
“click”,
function(){
$(this).val(“”);
}
);
在实际应用中对于比较简单的事件绑定类型，还可以使用一种缩略形式，上面缩略后如下：
$(“#firstname”).click(
function(){
$(this).val(“”);
}
);
为处理函数传递参数
bind(type,[data],fn)
单击测试按钮对页面上的两个文本框进行填充
function handler(event){
$(“#firstname”).val(event.data.firstname);
$(“#lastname”).val(event.data.lastname);
}
$(“#test”).bind(
“click”, {firstname:”Dennis”, lastname:”Ji”}, handler
);

阻止浏览器默认的行为：
bind(type,[data],fn)函数在使用的时候还会碰到与浏览器的默认操作冲突的问题，
//表单提交绑定
$(“form”).bind(
“submit”,
function() {
alert(“你单击了提交按钮, 接着将响应默认动作.”);
});
弹出对话框后继续执行原来默认的动作，改写后将不会执行
$(“form”).bind(
“submit”,
function() {
$(“#result”).html(“你单击了提交按钮, 不响应默认动作.”);
return false;
});
这在进行用户注册信息检测等功能时特别有用，而且可以有效降低客户端在出错状况下
和浏览器的交互次数，从而减轻服务器的负担。

反绑定事件
所谓反绑定，就是接触与元素绑定的某种事件类型及处理函数，jQuery的反绑定处理函数为unbind([type],[data])。
如果不希望由此功能的存在，则添加反绑定代码，如下所示：
绑定click事件
$(“#firstname”).bind(
“click”,
function(){
$(this).val(“”);
}
);
反绑定click事件
$(“#test”).click(
function(){
$(“#firstname”).unbind();
}
);
unbind()不带任何参数，表明删除所有的绑定时间，如果为unbind(“click”)，表明只对id为firstname元素的click类型的
事件进行反绑定，而对其他类型的事件不予理睬。

一次性的事件绑定
one(type,[data],fn)

3、事件触发器
所谓事件触发器，简单的说就是通过代码来模拟用户的操作动作而实现事件的触发。
trigger触发事件，对页面上所有匹配的元素触发某一种类型的事件,也可以触发bind()注册的自定义事件
trigger(type,[data])
调用方式： $(“form”).bind(
“submit”,
function() {
$(“#result”).html(“你单击了提交按钮, 不响应默认动作.”);
return false;
});
$(“#test”).click(
function(){
$(“form”).trigger(“submit”);
}
);

trigger附加参数数据，这里调用的是匿名函数
//trigger传参数
$(“#test”).click(
function(event, para1, para2){
$(“#result”).html(“传进来的两个参数:<br/><b>”+para1+”<br/>”+para2+”</b>”);
}
);
$(“#test”).trigger(
“click”,
[“Hello”,”World!”]
);
triggerHandler触发事件
triggerHandler(type,[data])是一个用户触发事件的函数
这个方法将会触发指定的事件类型上所有绑定的处理函数，但不会执行浏览器的默认动作，这一点是
与trigger的区别。

4、事件的交互处理
模仿鼠标的悬停
hover(over,out) 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法
#nametip {
margin:5px;
padding:5px;
color: white;
background-color: green;
}

$(“#nametip”).hide();
$(“#username”).hover(
function(){
$(“#nametip”).show();
},
function(){
$(“#nametip”).hide();
}
);

toggle：多次单击的循环响应
click()只会发出一种响应，而toggle(fn,fn)可以处理每次单击产生不同的结果。
toggle(fn,fn)有两个函数，单击了一下匹配的元素，则触发指定的第一个函数，当再次
单击同一个元素时，将触发指定的第二个函数。也可以用函数类表toggle(fn1,fn2,fn3…)

5、jQuery内置事件类型
jQuery内置事件函数用于处理与浏览器、鼠标、键盘以及表单等相关的常用的事件响应。
如click(),submit等都属于jQuery的内置事件函数
function() 不带参数的用户模拟用户的操作，无须用户真正执行该动作，即可实现该动作的响应。
function(fn) 带有参数的事件函数，表示当该事件类型的动作被触发时执行参数中的响应函数。
jQuery内置事件类型分类：
浏览器相关事件如，error(fn)、load(fn)、unload(fn)、resize(fn)、scroll(fn)
表单相关事件如，change(fn)、select(fn)、submint(fn)
键盘操作相关事件如，keydown(fn)、keypress(fn)、keyup(fn)
鼠标操作相关事件如，click(fn)、dbclick(fn)、mousedown(fn)、mousemove(fn)、
mouseout(fn)、mouseover(fn)、mouseup(fn)
界面显示相关事件blur(fn)、focus(fn)
前面使用hover()函数实现了鼠标移入移出作不同响应的效果，该效果可以使用鼠标相关操作来实现：
$(“#username”).mouseover(
function(){
$(“#nametip”).show();
}
).mouseout(
function(){
$(“#nametip”).hide();
}
);
查看hover()实现的源码，即可以发现，其也是调用mouseover()和mouseout()函数实现的。