事件是脚本语言的灵魂
,所以没有事件的脚本语言是没有灵魂的………
事件使页面具有了动态性和响应性,木的事件的话就很难实现网站与人的交互
一、页面加载响应事件
$(document)
用于获取整个文档的对象,$(document).ready()
方法就是等HTML文档加载完成就执行的一个方法。它可以这样写:
$(document).ready(function(){
//在这里写代码
});
也可以简写为:
$().ready(function(){
//代码片
});
///////////或//////////////
$(function(){
//代码片
})
当$()
不带参数的时候,默认的参数就是document
,所以$()
是$(document)
的简写
二、jQuery中的事件
jQuery统一了浏览器中所有事件的名称,下表很长,列出了jQuery
中的事件:
注:表格内的参数fn
代表function
代表可以加一个函数绑定到元素上
方法 | 说明 |
---|---|
blur() /blur(fn) |
元素失去焦点时触发元素事件 |
change() /change(fn) |
元素的值改变并失去焦点时触发元素事件 |
click() /click(fn) |
元素单击时触发元素事件 |
dbclick() /dbclick(fn) |
元素双击时触发元素事件 |
error() /error(fn) |
JS发生错误时触发元素事件 |
focus() /focus(fn) |
匹配元素获得焦点触发元素事件 |
keydown() /keydown(fn) |
键盘按下触发事件 |
keyup() /keyup(fn) |
按键释放时触发事件 |
keypress() /keypress(fn) |
按下并抬起按键时触发事件 |
load(fn) |
匹配的元素内容完全加载完毕时触发事件 |
unload(fn) |
在元素卸载时触发事件 |
mousedown(fn) |
在元素上按下鼠标时触发事件 |
mousemove(fn) |
鼠标在元素上移动时触发事件 |
mouseout(fn) |
鼠标在元素上离开时触发事件 |
mouseover(fn) |
鼠标移入元素时触发事件 |
mouseup(fn) |
鼠标在元素上按下并松开时触发事件 |
resize(fn) |
当文档的窗口改变大小时触发事件 |
scroll(fn) |
当滚动条发生变化时触发事件 |
select() /select(fn) |
在元素上选中某段文本时触发事件 |
submit() /submit(fn) |
在表单提交时触发事件 |
三、事件绑定
1、为元素绑定
在jQuery
中,为元素绑定使用bind()
方法,语法格式如下:
bind(type,[data],fn);
其中type
是事件类型,data
是一个可选参数,作为event.data
的值传递给事件对象的额外数据对象,fn
就是绑定事件的处理程序。
例如,为一个按钮绑定单击事件:
$("input:button").bind("click",function(){
alert("你单击了鼠标");
});
2、移除绑定
移除绑定使用unbind()
方法,语法格式:
unbind([type],[data])
两个参数第一个参数是元素类型,第二个参数如上述所述的传递的数据,两个参数都是可加不可加的,如果不加参数,将会移除该元素的所有控件。
3、绑定一次性事件处理
绑定一次性的事件处理使用one()
方法,语法格式如下:
one(type,[data],fn)