JavaScript是一种事件驱动型的语言,也就是说,javaScript和HTML之间的交互是通过用户在浏览器上触发事件来驱动的。jQuery扩展了JavaScript的事件处理机制。
ready ( [ [data],fn ] ) | 页面加载完毕后发生的事件 |
blur ( [ [data],fn ] ) | 元素失去焦点时发生的事件 |
change ( [ [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");
},function(){
$("#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");