jquery基础之事件操作详解_jquery

《jquery基础之事件操作详解_jquery》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、Jquery基础之事件操作详解事件是用户操作时页面或页面加载时引发的用來完成javascript和HTMLZ间的交互操作。常见的元素点击事件、鼠标事件、键盘输入事件等，较传Javascript相比JQuery壇加并扩展了基本的事件处理机制，极大的增强了事件处理的能力。一、DOM加载事件页面加载完毕后浏览器会通过javascript为Dom元索加载事件，使用Javascript时候使用的是window,onload方法，而Jquery使用的是$(document).ready()方法，下表展示两个事件

2、的异同。window.onload方法$(documeiit)・ready()方法执行时机必须等待所有内容加载完成后才能执行页面的DOM兀素绘制完成后可以执行不必等待全部内容加载完成。绑定函数个数该方法能够绑定一个函数，如果绑定多个只能执行最后的一个绑定。例：window.onload=function(){alerwindow.onload二function。{aler执行结果只执行最后绑定的函数结果是打印：2.能够注册多个函数，按绑定顺序执行绑定函数。例：$(document)・ready(fu

3、ntction(){alert$()・ready(function(){alert(〃2〃)汀);执行结果是顺序执行绑定的函数：先打印1•然后再打印2.简化写法无$().ready();$.ready()二、事件处理当文件加载完成后就可以为元素添加事件处理，进而事件执行某些动作完成相关操作。jquery中有多种事件处理方法，主要有bind()>one()、unbind()、live()、trigger()>triggerHander()等。Jquery方法使用bind()方法为匹配的元素进行特定的事

4、件绑定。bind()方法格式如下：bind(type,[data],fun);bind()方法有三个参数，各个参数说明如下：第一个参数是事件类型，主要如卜:blur、focus、load、resizc>scroll、unload、click>dbclick>mousedown>mouseup、mousemove>mouseover、mouseout>mouseenter>mouseleave>change>select、submit、keydown>keypress>keyup和error等。也可以

5、是自定义名称，Jquery中的事件绑定类型比javascript少了〃on〃，因此jquery中事件click对应javascript中的onclick函数。第二个参数是可选参数，作为event,data屈性值传递给事件对彖的额外数据对象。第三个参数是用来绑定的处理函数。为按钮绑定单击事件示例：〈inputtype二〃button"id二〃btnl〃value二〃单击〃〉$(〃#btnl〃)・bind("click",function(){alertC单击事件绑定")；})；bind()方法为元素绑

6、定的事件一直冇效直到unbind()方法或者删除元素。如果想要绑定事件只能执行一次就要使用one()方法绑定事件。one()同bind()方法一样，区别在于one()方法绑定的事件只能执行一次。为按钮绑定一次性事件示例：

7、ind([type],[data])unbind()方法是元素bind()方法的反向操作，从每个匹配的元素小删除绑定的事件。当没冇参数时候删除所冇的绑定事件。如果提供了事件类型的参数则删除指定的绑定事件。如果指定了事件类型，第二个参数指定了函数名称则删除事件类型屮与第二个参数名称对应的事件。示例:〈inputtype二〃button"id二〃btnl"value二"click"/>〈inputtype二〃button"id二〃btn2〃value二"removeBind〃/>$(〃#btnl〃)・b

8、ind("click",funl=function(){alert(，z事件1〃);});$(〃#btnl〃).bind("click",fun2=function(){alertC事件2〃)；});$(〃#btn2〃)・bind("click",function(){$C#btnl〃)・unbind("click",fun2);})；该示例使用unbind0方法的二个参数形式移除第二次绑定的事件处理函数。liveO方法为元素动态绑定事件，使用该方法绑定事件后，新加对