jQuery中的事件

jQuery中的事件

jQuery事件是对JavaScript事件的封装，常用事件分类如下：

基础事件：window事件  鼠标事件  键盘事件  表单事件

复合事件(多个事件的组合)：鼠标光标悬停  鼠标连续点击

1、鼠标事件

鼠标事件是当用户在文档上移动或单击鼠标时而产生的事件，常用鼠标事件有：

方法	描述	执行时机
click( )	触发或将函数绑定到指定元素的click事件	单击鼠标时
mouseover( )	触发或将函数绑定到指定元素的mouse over事件	鼠标移过时
mouseout( )	触发或将函数绑定到指定元素的mouse out事件	鼠标移出时

以mouseover()为例，实现鼠标移过时特效

//当鼠标移过元素时 为事件添加响应方法
$("#nav li").mouseover(function() { //当鼠标移过#nav li元素时
$(this). addClass("heightlight"); //为鼠标所在li元素添加样式
});
$("#nav li").mouseout(function() { //当鼠标移出#nav li元素时
$(this).removeClass(); //移除鼠标所在li元素的全部样式
});
//this指鼠标所在事件的当前元素对象

2、键盘事件

用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件有：

方法	描述	执行时机
keydown( )	触发或将函数绑定到指定元素的keydown事件	按下键盘时
keyup( )	触发或将函数绑定到指定元素的keyup事件	释放按键时
keypress( )	触发或将函数绑定到指定元素的keypress事件	产生可打印的字符时

3、表单事件

当元素获得焦点时，会触发focus事件，失去焦点时，会触发blur事件，详见下表：

方法	描述	执行时机
focus( )	触发或将函数绑定到指定元素的focus事件	获得焦点
blur( )	触发或将函数绑定到指定元素的blur事件	失去焦点

示例：

<p>
<label>用户名：</label>
<input name="member" type="text" />
</p>
<p>
<label>密码：</label>
<input name="password" type="text" />
</p>

获得焦点设置样式，失去焦点去除样式

$(document).ready(function () {
$("[name=member]").focus(function(){
$(this).addClass("input_focus");
});
$("[name=member]").blur(function(){
$(this).removeClass("input_focus");
});
});

二、绑定事件bind()

除了使用事件名绑定事件外，还可以使用bind()方法

1、绑定单个事件

语法：bind("事件名",函数)

"click"： 事件类型 事件类型要用引号引起来

”function()“ ： 处理函数

2、同时绑定多个事件方法

bind({事件名:函数,事件名:函数,.....})

$("input[name=event_1]").bind({
"mouseover": function () {//为mouseover绑定方法
$("ul").css("display", "none");
},
"mouseout": function () {//为mouseout绑定方法
$("ul").css("display", "block");
}
});

三、移除事件unbind()

参数	含义	描述
[type]	事件类型	主要包括：blur、focus、click、mouseout等基础事件，此外，还可以是 自定义事件
[fn]	处理函数	用来绑定的处理函数

注意：当unbind()不带参数时，表示移除所绑定的全部事件

function testUnbind(){//定义一个函数移除单个事件
$("input[name=userName]").unbind("mouseover");
}

四、复合事件

1、鼠标光标悬停事件hover()

鼠标光标悬停事件hover()方法相当于mouseover与mouseout事件的组合

$(document).ready(function() {
$("#myaccound").hover(function(){//移入触发
$("#menu_1").css("display","block");
},
function(){//光标移出时触发
$("#menu_1").css("display","none");
}
);
});

2、鼠标连续click事件

toggle()

A、用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件。

B、如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。 toggle()方法用于模拟鼠标连续click事件（在1.9以后的版本中移除了）

$(document).ready(function () {
$("div[class=testToggle]").toggle(
function () {
$(this).css("background-color", "red");//第一次单击
},
function () {
$(this).css("background-color", "green"); //第二次
},
function () {
$(this).css("background-color", "blue"); //第三次
}
);
});

感谢大家的阅读，如有不对的地方，可以私信我，感谢大家！