Jquery基础之事件操作详解_jquery

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

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

3、 然后再打印2.简 化 写 法无$().ready();$.ready()二、事件处理当文件加载完成后就可以为元素添加事件处理，进而事件执行某些动作完成相关 操作。jquery中有多种事件处理方法，主要有bind() > one()、unbind() 、live()、 trigger () > triggerhander ()等。j query方法使用bind ()方法为匹配的元素进 行特定的事件绑定。bind ()方法格式如下：bi nd(type, data, fun);bind()方法有三个参数，各个参数说明如下：第一个参数是事件类型，主要如卜:blur、focus、load

4、、resizc> scroll、unload、 click> dbclick> mousedown> mouseup、 mousemove> mouseover、 mouseout> mouseenter> mouseleave> change> select、 submit、 keydown> keypress> keyup 和error等。也可以是自定义名称，jquery中的事件绑定类型比javascript少 了on，因此 jquery 中事件 cl ick 对应 javascript 中的 oncl ick 函数。第二个

5、参数是可选参数，作为event, data屈性值传递给事件对彖的额外数据对 象。第三个参数是用来绑定的处理函数。为按钮绑定单击事件示例：input type二button" id二btnl value二单击$(#btnl) bind ("click", function () alert c 单击事件绑定")；)；bind()方法为元素绑定的事件一直冇效直到unbind()方法或者删除元素。如果 想要绑定事件只能执行一次就要使用one ()方法绑定事件。one ()同bind ()方法 一样，区别在于one()方法绑定的事件只能执行一次。为按钮绑定一次性

6、事件示例：<input typc二buttort id二btnl value二单击$(#btnl) one ("click", function() alert ("单击事件绑定););unbind ()方法为元素取消事件绑定，unbind ()方法的格式如h:$(selctor). unbind(type, data)unbind()方法是元素bind()方法的反向操作，从每个匹配的元素小删除绑定的 事件。当没冇参数时候删除所冇的绑定事件。如果提供了事件类型的参数则删除 指定的绑定事件。如果指定了事件类型，第二个参数指定了函数名称则删除事件 类型屮与第二个

7、参数名称对应的事件。示例:input type二button" id二btnl" value二"click" />input type二button" id二btn2 value二"removebind />$ (#btnl) bind ("click", funl = function () alert (，z 事件 1); );$ (#btnl). bind ("click", fun2 = function () alert c事件 2)； );$(#btn2)bind (&q

8、uot;click", function () $ c#btnl) unbind ("click", fun2);)；该示例使用unbind0方法的二个参数形式移除第二次绑定的事件处理函数。liveo方法为元素动态绑定事件，使用该方法绑定事件后，新加对应元素也能触 发相应事件。live()方法格式如下：$(selector) live(type, data, fun);live动态绑定示例：$(p). live ("click", function() $ (this) hide () ;);该示例为所有的p元素节点动态添加了 click事件，

9、无论是现有的p元素节点还 是以后要添加的p元索节点都冇会中点单击时候触发hide()从而隐藏自己odieo 方法是live()方法的反向操作，结果liveo方法动态绑定的事件和unbind()方 法一样。使用die ()方法取法动态绑定后，所冇动态绑定的事件将删除。trigger0方法在匹配的元素上触发参数中的事件，该方法会触发浏览器默认事 件，返回false阻止浏览器默认事件。trigger()方法格式如下:$ (selector). trigger(type, data);triggero方法示例：$ ("form: first) trigger (''subii

10、iit");该示例触发第一个from表单的submit操作。triggerhandlero方法这个方法会触发绑定事件，但是不会触发浏览器默认事 件。与triggero方法触发后返冋false效果一样。使用方法和trigger 一样。三、事件事件处理中已经列出t主要的事件类型如卜:blur、focus、load、resize、scroll、 unioad、click、dbclick> mousedown> mouseup> mousemove、mouseover、mouseout、 mouseenter> mouseleave> changeselect、

11、 submit> keydown、 keypress> keyup 和error等。各个事件类型主要是两种用法绑定事件、触发事件。以click事件 为例,click方法格式如下：绑定事件$ (selector). click (functiron () /函数 体),触发事件$ (selector). cl ick () o 例：<input type二button" id二btnl value二绑定事件/><input type二button" id二btn2 value二触发事件7>$ (，#btnr，). click (functi

12、on () alert c 事件绑定"););$("#btn2") click (function() $(#btnl") click ()汀)该示例为第一个按钮btnl绑定事件，为按钮btn2绑定事件同时在绑定事件中触 发第一个按钮的绑定事件。其余事件类型和cl ick类似。四、合成事件合成事件也可以称为交互事件是jquery自定义的方法，方法有两个hover ()和 toggle () ohover ()方法模仿鼠标悬停事件，方法格式如下：hover (enter, leave) o例：$culli) hover (function () alert

13、 (，/enter，/) ;, functiron () aler t( "leave") ;);该示例为ul的li元素绑定悬停事件，当鼠标停上ul的子元索li上时候会触发 entero函数，打卬“enter” ,当鼠标移出li元素时候会打印"leave"。toggle()方法切换操作循环执行绑定的函数，方法格式如下：toggle(funl, fun2,.，funn);例：<input type二button" id=btnl" value二触发切换操作"/>$(#btnl") toggle (func

14、tion() alert (z，开始);, function () alert (，z继续)；, function() alertc结束")汀)；该示例为按钮btnl绑定切换事件每次单击都会顺序触发绑定事件中的一个。该 示例第一次点击打印开始，第二次点击打印继续，第三次点击打印结束， 再次点击和第一次一样打印开始，循环顺序执行函数。五、事件属性jquery对事件属性进行了封装使事件处理在各浏览器下不需要判别类型都能止 常运行。各个事件属性的如下：事件类型event, type.该屈性用丁获得触发该事件的类型，对不引发事件的不同 操作返冋不同的结果;例：$(p). click(func

15、tion(event) alert(event. type) ;);该示例返回元索p单击事件的事件类型，结果打印是click；事件类型event, target该属性用于获得触发事件的元素;例：$ (z，az，). click (function (event) alert (event target. href) ;);该示例返冋元素a的href属性。事件默认行为event. preventdefault;该属性用于阻止事件的默认属性，例：$ click(function(event)event. preventdefault;);使用该属性阻止元素a的默认的跳转行为，结果和return f

16、alse-样。事件冒泡event. stroppropagation屈性用丁阻止事件冒泡，例：$ (div). click (function (event) alert ("里层点击“);event. stoppropagation;);该示例中使用stoppropagation属性阻止div的父元索的click事件被触发。event. pagcx和event. pagcy属性，使用这两个屈性可以获得鼠标的相对丁页面 的当前位置。例：$("p").click(function(event)alert("cutrent mouse location+ev

17、ent. pagex+ +event. pagey););该示例当点击元索p的时候获得鼠标的当前位置，并打印出來。event, witch 性，使用这个属性可以获得鼠标单击时候鼠标的左中右键，在键 盘事件屮获得键值。$("p"). mousedown(function(event)alert (event.witch););该示例当鼠标按下时候打卬鼠标键值。左中右健分别对应值是1、2、3。event. metakey属性用于在事件获得键盘的ctrl键，例：$(body) keydown(function (event) if (event. metakey) alert(c

18、trl，z) ; el sealcrt(no ctrl，/) ;);该示例当在页而中按下键盘时候如果按键为ctrl键就打印ctrl,否则打印no ctrl，z.六、事件冒泡页面中有多个绑定事件因此可能出现多个元索响应同一个事件，由此引发了事件 不是我们预期的，这种现象就是事件冒泡，耍处理这个问题可以对事件的作用范 围进行限制，jquery屮使得stoppropagation()方法停止事件的冒泡。事件冒泡 示例：<body><di v><span>事件冒泡</span>di v 内容</di v>body 内容</body>

19、;$ ("body").click (function ()alert ("body"););$(body div). click(function() alert(div););$ ("span") click(function() alert ("spart)汀)；在该示例中当点击span时候会触发三个打印事件"span" "div" body,如何 阻止事件冒泡？可以使用jquery事件中的stroppropagation ()方法來停止事件 冒泡。上面示例改成这样：$(body

20、). click(function(event)alert("body");event. stoppropagation() ；)；$("bodydiv). cl ick (f un cti on( eve nt) alert (z，di vz，) ;eve nt. stoppropagation ()汀)；$ (''span“). click (function (event) alert ("span") ; event stoppropagation() ；)；这样当点击不同元素吋候就不会发生冒泡事件。七、事件命名空间事件添加命名空间便于事件的管理:删除事件和触发事件。例：div元素绑定多个事件</div>$(div"). bind(z，click. plugin&