首页 > 代码库 > jQuery中的事件
jQuery中的事件
JavaScript是一种事件驱动型的语言，也就是说，javaScript和HTML之间的交互是通过用户在浏览器上触发事件来驱动的。jQuery扩展了JavaScript的事件处理机制。
| ready ( [ [data],fn ] ) | 页面加载完毕后发生的事件 |
| blur ( [ [data],fn ] ) | 元素失去焦点时发生的事件 |
| change ( [ [data],fn ] ) | 元素的值发生改变时发生的事件 |
| clikc ( [ [data],fn ] ) | 当鼠标点击时发生的事件 |
| dblcikc ( [ [data],fn ] ) | 鼠标双击时发生的事件 |
| focus ( [ [data],fn ] ) | 元素获得焦点时发生的事件 |
| keydown ( [ [data],fn ] ) | 按下键盘时发生的事件 |
| keyup ( [ [data],fn ] ) | 松开键盘时发生的事件 |
| keypress ( [ [data],fn ] ) | 按下并松开键盘是发生的事件 |
| mousdown ( [ [data],fn ] ) | 按下鼠标按钮时发生的事件 |
| mouseover ( [ [data],fn ] ) | 鼠标移动时发生的事件 |
| mouseout ( [ [data],fn ] ) | 鼠标离开某个元素时发生的事件 |
| mouseover ( [ [data],fn ] ) | 鼠标浮到某个元素上时发生的事件 |
| mouseup ( [ [data],fn ] ) | 松开鼠标按钮时发生的事件 |
| scroll ( [ [data],fn ] ) | 页面滚动时发生的事件 |
| select ( [ [data],fn ] ) | 页面input元素的选取事件 |
| submit ( [ [data],fn ] ) | 表单提交事件 |
| unload ( [ [data],fn ] ) | 页面卸载时发生的事件 |
1.页面载入和卸载事件
$(document).ready()和window.onload():
$(document).ready()是在页面的DOM元素加载完毕后触发而window.onload()是在页面将所有元素（包括页面所关联的资源）加载完毕后再触发。
2.鼠标相关的事件
ag: $(document).mousedown(
function(e){
$("#begin").html("起始位置："+e.pageX+","+e.pageY);
}
)
$(document).mousedown(
function(e){
$("#now").html("现在的位置："+e.pageX+","+e.pageY);
}
)
$(document).mouseup(
function(e){
$("#end").html("结束的位置："+e.pageX+","+e.pageY);
}
)
3.键盘相关的事件
$("#word").keypress(
function(){
$("#copy").html($("#word").val());
}
)
4.焦点相关的事件
5.其他相关事件
6.事件对象
| 属性 | 说明 |
| type | 获取事件类型 |
| target | 获取触发事件的元素 |
| result | 获取上一个元素处理函数的返回值 |
| which | 获取在鼠标单击事件中获取鼠标按键1表示左键2表示中键3表是右键 |
| pageX/Y | 获取事件发生时相对于页面的坐标 |
| keyCode | 获取在键盘事件中键盘对应的键值 |
| screenX/Y | 获取在键盘事件发生时相对于屏幕的坐标 |
| data | 事件发生时传递的参数信息都保留在这个属性种 |
$("#btn").click(
function(e){
var str="事件发生的类型是："+e.type+"事件发生的对象是："+e.target.type;
if(e.which==1){
str=str+"单击的是鼠标左键";
$("#content").html(str);
}})
二. jQuery的合成事件
(1.) hover 事件
$("#id").hover(
function(){
$("#a").css("display","none");
}afunction(){
$("#a").css("display","block");
}
);
(2.)toggle事件
jQuery选择器.toggle(fn1,fn2fn3,,,,,,,)
三. jQuery 事件绑定
(1).bind和unbind
$("#id").bind(
{
事件名：fn(),
事件名：fn(),
......
}
)
$("p").unbind();//移除段落元素的所有事件；
$("P").unibind("click");//移除段落元素的鼠标单击事件
(2).live和die
live是对bind的增强，如果对某个元素绑定了某个事件，然后再复制这个元素，如果是bind的话则新的元素不能执行bind 绑定的方法
而live则可以复制live绑定的方法。
(3).on和off
on和off 要比以上的方法更加优秀。
$("#btn").on("click",{sfz:$("#txt").val()},function(e){
if(e.data.sfz==""){
alert("身份证号不能为空！");
}else{
var y=e.data.sfz.substr(6,4);
var m=e.data.sfz.substr(10,2);
var d=e.data.sfz.substr(12,2);
alert("出生日期是："+y+"年"+m+"月"+d+"日");
}
})
四.模拟触发事件
$("#btn").click();
$("#btn").trigger("click");
jQuery中的事件