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"); //第三次
}
);
});
感谢大家的阅读，如有不对的地方，可以私信我，感谢大家！