事件是用户操作时页面或页面加载时引发的用来完成javascript和HTML之间的交互操作。常见的元素点击事件、鼠标事件、键盘输入事件等,较传Javascript
相比JQuery增加并扩展了基本的事件处理机制,极大的增强了事件处理的能力。
一、DOM加载事件
页面加载完毕后浏览器会通过javascript为Dom元素加载事件,使用Javascript时候使用的是window.onload方法,而Jquery使用的是$(document).ready()方法,下表
展示两个事件的异同。
window.onload方法
$(document).ready()方法
该方法能够绑定一个函数,如果绑定多个只能执行最后的一个绑定。例: window.onload=function(){alert("1");} window.onload=function(){alert("2");} 执行结果只执行最后绑定的函数结果是打印:2. 能够注册多个函数,按绑定顺序执行绑定函数。例: $(document).ready(funtction(){alert("1");}); $().ready(function(){alert("2");}); 执行结果是顺序执行绑定的函数:先打印1.然后再打印2.
执行时机
必须等待所有内容加载完成后才能执行
页面的DOM元素绘制完成后可以执行不必等待全部内容加载完成。
绑定函数个数
简化写法
无
$().ready();$.ready()
二、事件处理
当文件加载完成后就可以为元素添加事件处理,进而事件执行某些动作完成相关操作。jquery中有多种事件处理方法,主要有bind()、one()、unbind()、live()、trigger()、triggerHander()等。Jquery方法使用bind()方法为匹配的元素进行特定的事件绑定。bind()方法格式如下:
bind(type,[ data],fun);
bind()方法有三个参数,各个参数说明如下:
第一个参数是事件类型,主要如下:blur、focus、load、resize、scroll、unload、click、dbclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup和error等。也可以是自定义名称,Jquery中的事件绑定类型比javascript少了"on",因此jquery中事件click对应javascript中的onclick函数。
第二个参数是可选参数,作为event.data属性值传递给事件对象的额外数据对象。
第三个参数是用来绑定的处理函数。
为按钮绑定单击事件示例:
<input type="button" value="单击">
$("#btn1").bind("click",function(){alert("单击事件绑定");});
bind()方法为元素绑定的事件一直有效直到unbind()方法或者删除元素。如果想要绑定事件只能执行一次就要使用one()方法绑定事件。one()同bind()方法一样,区别在于one()方法绑定的事件只能执行一次。
为按钮绑定一次性事件示例:
<input type="button" value="单击">
$("#btn1").one("click",function(){alert("单击事件绑定");});
unbind()方法为元素取消事件绑定,unbind()方法的格式如下:
$(selctor).unbind([type],[data])
unbind()方法是元素bind()方法的反向操作,从每个匹配的元素中删除绑定的事件。当没有参数时候删除所有的绑定事件。如果提供了事件类型的参数则删除指定的绑定事件。如果指定了事件类型,第二个参数指定了函数名称则删除事件类型中与第二个参数名称对应的事件。
示例:
<input type="button" value="click" /> <input type="button" value="removeBind" /> $("#btn1").bind("click", fun1 = function () { alert("事件1"); }); $("#btn1").bind("click", fun2 = function () { alert("事件2"); }); $("#btn2").bind("click", function () { $("#btn1").unbind("click", fun2); });
该示例使用unbind()方法的二个参数形式移除第二次绑定的事件处理函数。
live()方法为元素动态绑定事件,使用该方法绑定事件后,新加对应元素也能触发相应事件。live()方法格式如下:
$(selector).live([type],[data],fun);
live动态绑定示例:
$("p").live("click",function(){$(this).hide();});