jQuery事件——window,鼠标,键盘,表单,绑定与移除,复合事件
众所周知,页面被加载时,会触发load事件,事件在元素对象与功能代码中起着重要的桥梁作用。
事件分类:
- 简单事件
- 复合事件
复合事件是截取组合了用户操作,并且以多个函数作为响应而自定义的处理程序。
简单事件:
- window事件
- 鼠标事件
- 键盘事件
- 表单事件
window事件:当用户执行某些会影响浏览器的操作时,而触发的事件。for instance:打开网页时加载页面,关闭窗口,调节窗口大小等操作引发的事件处理。常用的就是文档就绪事件,ready()
鼠标事件:click();mouseover();mouseout();等事件
键盘事件:常见的keydown();keyup()和keypress()
表单事件:所有事件类型中最稳定,且支持最稳定的事件之一。
focus()和blur(),分别是获得焦点和失去焦点
绑定事件与移除事件
如果需要为匹配的元素同时绑定一个或多个事件,可以使用bind()方法,语法格式:
bind(type,[data],fn);
参数类型 | 描述 |
---|---|
type | 事件类型,click等 |
[data] | 传递给事件对象的额外数据对象,该参数不是必需的 |
fn | 用来绑定的处理函数 |
绑定click事件
$("input[name=xiong]").bind("click",function(){
$("p").css("background-color","#F30");
});
同时绑定多个事件
$("input[name=xiong]").bind("click",function(){
mouseover:function(){
$("ul").css("display","none");
},
mouseout:function(){
$("ul").css("display","block");
}
});
移除事件
unbind(type,fn);//type为事件类型,fn为处理函数
当unbind()不带参数时,表示移除所绑定的全部事件
复合事件
在jQuery中有两个复合事件方法——hover()和toggle()方法,和ready()类似,都是jQuery自定义的方法
hover()用于模拟鼠标指针悬停事件。当鼠标指针移动到元素上时,会触发指定的第一个函数(enter);鼠标指针移出这个元素时,会触发指定的第二个函数(leave),相当于mouseover和mouseout事件的组合。
$("p").hover(function(){
$("p").css("background-color","yellow");
},function(){
$("p").css("background-color","pink");
});
在jQuery,toggle()方法用于模拟鼠标连续click事件。第一次单击,触发指定的一个函数,第二次单击,触发第二个函数,依次下去。
$("p").toggle(
function(){
$("body").css("background-color","green");},
function(){
$("body").css("background-color","red");},
function(){
$("body").css("background-color","yellow");}
);
还没有评论,来说两句吧...