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()函数实现的。